bootstrap全宽列

Question

我有一段时间有这个问题，但我找不到合理的答案。

Bootstrap声明如下： 内容应放在列中，只有列可能是行的直接子项。

但是当我有一排并且需要在我的下方放置一个全宽度的div？我应该放一个col-xs-12吗？例如

<div class="row">
    <h1>Title</h1>
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

h1是全宽。

根据bootstrap这样做是不正确的，所以我应该怎么做？我应该将h1放在一个列内吗？

Answer 1

行是一个水平的列组，因此h1元素属于行的上方：

<h1>Title</h1>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

或者在自己的行中使用单个全宽列，但没有必要：

<div class="row">
    <div class="col-md-12">
        <h1>Title</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

Answer 2

<div class="row">
    <h1>Title</h1>
</div>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

如果你不知道自己在做什么，你应该使用cols。问题是，cols有padding-left 15px和padding-right 15px。行包含margin-left -15px和margin-right -15px。如果你在没有cols的行中使用div：

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

然后你会遇到左侧和右侧缩进的问题，如果你把它与：

混合起来

<div class="row">
    <div class="col-...">
        content
    </div>
</div>

因此，使用cols来做它总是更好。