Bootstrap页面居中不起作用

Question

我正在使用bootstrap来创建页面布局，但内容总是略微向左偏右。我注意到行类的剩余边距为-20px，我认为这是导致问题的原因，但肯定是不对的？

这是我的标记：

<div class="row header-wrap">
    <div class="container header">
        <div class="row">
            <div class="span6">
            test
            </div>
            <div class="span6">
            test
            </div>
        </div>
    </div>
</div>

BTW Header和header-wrap尚未定义。

外行div的目的是稍后为标题创建连续背景。

---

Answer 1

得到了你的问题。您正在使用.row两次。从此处删除.row：

<div class="row header-wrap">

然后转到：

<div class="header-wrap">

另外，请将背景颜色设为.header-wrap而不是.container。

请参阅jsFiddle

的输出

Answer 2

为什么在没有父div的情况下使用行div是个坏主意？

它永远不会让你把内容集中在一起，因为行类的左边缘的负边距是-20px，可以说任何应用于行的样式总是在左边流出，因此不会使里面的元素。因此，使用它周围的div作为父，解决了问题。使用行类的方式是错误的使用方法。

您可以通过以下方式实施设计： Jsfiddle Demo

<header>
<div class="container">

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

    </div>
   </div>
</header>