引导页面居中不起作用答案

【问题标题】：Bootstrap page centering not working引导页面居中不起作用
【发布时间】：2013-03-05 10:05:21
【问题描述】：

我正在使用引导程序创建页面布局，但内容总是稍微偏左多于右侧。我注意到 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的目的是为以后的header创建一个连续的背景。

【问题讨论】：

实际上，默认情况下，引导页面布局是居中的。你想以什么为中心？文字还是布局？
@Praveen Kumar 布局，正如您在我的编辑中看到的那样，它没有居中。
移除容器类上方的 Row 看看会发生什么。你真的需要一个行然后一个容器吗？
老兄，这叫居中。您希望文本测试居中吗？
是的，因为这使我能够添加在所有分辨率下横跨屏幕的背景。如果我删除它，布局会稍微向右而不是向左。

标签： html css twitter-bootstrap

【解决方案1】：

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

它永远不会让您将内容居中，因为行类的左侧边距为-20px，也就是说，任何应用于该行的样式将始终在左侧流出，因此不会居中里面的元素。因此，使用围绕它的 div 作为父级，可以解决问题。您使用行类的方式是错误的使用方式。

您可以通过以下方式实现您的设计： jsfiddleDemo

<header>
<div class="container">

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

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

【讨论】：

【解决方案2】：

有你的问题。您正在使用.row 两次。从这里删除.row：

<div class="row header-wrap">

并做到：

<div class="header-wrap">

另外，将背景颜色赋予.header-wrap 而不是.container。

查看jsFiddle 的输出

【讨论】：

@Preveen Jumar 这实际上与 Akash Soti 的答案相同，这意味着我不能为标题提供连续的背景。
等等...页眉的连续背景，你的意思是全宽？
@imperium2335 更新了答案。检查。
是的，全宽。交换背景并没有改变任何东西，该行仍然没有居中:(