html - 如何在 html 页面中精确居中 Bootstrap 网格？

Question

在 bootstrap 中创建如下 3 行的普通网格时，网格始终位于页面左侧，

我已经尝试在 text-align:center 的帮助下将整个网格居中并尝试使用 css 类 center-block 和 文本中心

但网格只是勉强向中心区域移动。

关于如何让它工作有什么建议吗？

此外，我还需要精确居中，而不是在 bootstrap 中使用偏移量

  <div class="container">

    <div class="row">

        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>

    </div>
    <div class="row">

        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>

    </div>
    <div class="row">

        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>

    </div>
    </div>

Answer 1

下面是如何在不使用偏移类的情况下获得精确居中的方法: Fiddle Demo

创建一个名为 col-centered 的新辅助类:

.col-centered {
  float: none;
  margin-right: auto;
  margin-left: auto;
}

您使用此类的任何列(例如 class="col-md-7 col-centered")都将直接在其容器的中间居中。

然后，在您的三列网格周围添加另一组列:

<div class="container">

    <div class="row">
        <!-- New set of columns, centered -->
        <div class="col-sm-7 col-centered">
            <!-- New row -->
            <div class="row">
                <div class="col-xs-4">
                    Block
                </div>
                <div class="col-xs-4">
                    Block
                </div>
                <div class="col-xs-4">
                    Block
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    Block
                </div>
                <div class="col-xs-4">
                    Block
                </div>
                <div class="col-xs-4">
                    Block
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    Block
                </div>
                <div class="col-xs-4">
                    Block
                </div>
                <div class="col-xs-4">
                    Block
                </div>
            </div>
        </div>
    </div>
</div>

确保使用 col-xs-4 而不是 col-xs-1 来创建三列，以便它跨越所有十二个 Bootstrap 网格列。