2017-12-27 274 views
0

我正在嘗試開發一個網站的定價部分,其中包含3個不同的價格。在最高層應該有一個標題和簡短說明,像「定價」,「定價方案:不使用行/列的副作用?

<section id="pricing"> 
    <div class="container"> 
    <h2>Pricing</h2> 
    <p>The pricing plans</p> 
     <div class="row"> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
      <div class="col-md-4"></div> 
     </div> 
    </div> 
</section> 

現在,我見過的人把那應該是1行的東西/ 1列,直接在容器內,如上面如果我遵循了自舉「公約」的話,我會怎麼做:

<section id="pricing"> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-xs-12"> 
       <h2>Pricing</h2> 
       <p>Here are our pricing plans</p> 
      </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-4"></div> 
       <div class="col-md-4"></div> 
       <div class="col-md-4"></div> 
      </div> 
     </div> 
</section> 

但是,並沒有給單col-xs-12 reduntant行。如果你看到了什麼? source of the Bootstrap home page,你會發現<p>標籤直接在container之內。但是,在這裏,<h2><p> t ags不是容器內唯一的東西,它們之後有一排。

所以我的問題是,會有任何使用第一個例子與「遵循規則」和使用第二個例子的無意的副作用?

回答

0

Bootstrap Grid框架依賴於填充和邊距來正確放置。當您忽略.row.col-*-*時,您會創建對齊問題。請看下面的代碼:

.default { 
 
    background: blue; 
 
    color: white; 
 
} 
 
    
 
.no-column { 
 
    background: gray; 
 
} 
 
    
 
.no-row { 
 
    background: yellow; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 default"> 
 
     <p>A paragraph within a col-12 element</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <p class="no-column">A paragraph with no column wrapper.</p> 
 
    </div> 
 
    
 
    <p class="no-row">A paragraph with no column or row wrapper.</p> 
 
</div>

在我們後面引導的框架網格元素的第一個例子;文本被包裝在包裝在作爲.container-fluid元素的一部分的行內的列內。

所有事情都按預期對齊。

在第二個示例中,我們省略了該列。立即我們失去了.col-*-*創建的填充,並且您的段落壓向容器的最左邊緣。

在第三個示例中,我們不僅省略了列,還省略了行類。正如你所看到的,間距差異變得更加極端。