Question

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

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

但网格几乎没有向中心区域移动。

关于如何让这个工作的任何建议？

此外，我还需要精确居中，而不是在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网格列。

Answer 2

您需要使用offset来对列进行居中：

<div class="container">
    <div class="row">
        <div class="col-xs-1 col-xs-offset-4">
            Block
        </div>
        <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 col-xs-offset-4">
            Block
        </div>
        <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 col-xs-offset-4">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>
        <div class="col-xs-1">
            Block
        </div>
    </div>
</div>

这是一个小伙伴：https://jsfiddle.net/AndrewL32/e0d8my79/12/

Answer 3

你需要包装。试试<div class="container">Your code here</div>

修改

在评论之后编辑了这个问题。

Answer 4

问题是你只使用Bootstrap中12个可能列中的3个。默认情况下，列从左到右运行。完整的12列将如下所示：

<div class='container'>
  <div class='row'>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
  </div>
</div>

该HTML代表12列，跨越.container的整个宽度。但由于您只使用了3个div，每个列大小为1列，所有3列都位于.container的左侧。

如果您希望3列跨越.container的整个大小，请执行以下操作：

<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>

如果你想要3个，以.container为中心的单列div，它有点复杂，因为12-3 = 9的结果不能被2整除。因为它不能被2整除，你可以在3列的左侧和右侧没有相同的大小空间。为了解决这个问题，你需要做一个类似于这个的嵌套（子）网格：

<div class="col-xs-4 col-xs-offset-4">
  <div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
  </div>
</div>

这实际上是另一个网格中的3列。

这将创建3个div，但第一个将被偏移（或推送）到右边4列，这将使所有3列看起来都在布局中居

Answer 5

bootstrap grid有12列。如果你想要3个相等的列，那么它们每个都必须是12/3 = 4＆＃39; gridcolumns＆＃39;宽。

你的HTML将会是这样的：

<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>

如何在html页面中精确居中引导网格？

5 个答案: