html - 引导页面居中不起作用

Question

我正在使用引导程序创建页面布局，但内容总是稍微偏左多于右侧。我注意到 row 类的边距为 -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>