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，如果你不知道自己在做什么。问题是，该列有padding-left 15px和padding-right 15px。行有margin-left -15px和margin-right -15px。如果您使用的是行的div没有的cols：

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

然后你有左，rightside缩进一个问题，如果你用混合起来：

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

因此它总是更好地做到这一点COLS。