行/列を使用しない場合の副作用ですか？

Question

私は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行ことになっているものを入れるには/ 。

<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と行を入れていない：1列Iは、ブートストラップ「慣例」を続いた場合は、直接の容器の内側に、上記のように、私は何だろう？ source of the Bootstrap home pageの場合、containerのすぐ内側に<p>というタグが表示されますが、ここでは<h2>と<p> t agはコンテナ内の唯一のものではなく、それに続く行があります。

私の質問は、第1の例と「ルールに従う」と第2の例を使用することの意図しない副作用が存在するかどうかです。

Answer 1

ブートストラップグリッドフレームワークは、適切な配置のためにパディングとマージンに依存しています。 .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要素の一部である行内に折り返された列内にラップされます。

すべてが期待どおりに整列します。

2番目の例では、列を省略しています。直ちに、.col-*-*によって作成されたパディングが失われ、段落がコンテナの左端の余白に押し付けられます。

3番目の例では、列だけでなく行クラスも省略しています。あなたが見ることができるように、間隔の差はさらに極端になります。