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。