引导全宽列

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 是全宽的。

根据引导程序这样做是不正确的，那我该怎么做呢？我应该将 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。如果您在没有列的行中使用 div：

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

然后你会遇到左右缩进的问题，如果你把它混在一起：

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

因此，使用 cols 总是更好。