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 有 apadding-left 15px和 a 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 总是更好。