ブートストラップグリッドカラムを分割するのに最適なアプローチ

Question

私はBootstrapグリッドカラムを次のように分割しました。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3">A</div> 
     <div class="col-md-6"> 
      <div class="col-md-12">B1</div> 
      <div class="col-md-12"> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 
      <div class="col-md-12"> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 
     <div class="col-md-3">C</div> 
    </div> 
</div> 

このコードの視覚的なレイアウトの下に見つけてください。

私のグリッド列の分割方法は正しいか間違っていますか？

Answer 1

常にリサイズ/またはその

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3">A </div> 

     <div class="col-md-6">B 
      <div class="row"> 
       <div class="col-md-12">B1</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 

     <div class="col-md-3">C </div> 
    </div> 
</div> 

Answer 2

b,b1.1, b1.2およびb2.1, b2.2の中の列の各行に対して、B内にrow divを追加するだけです。これは助けになるはずです。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
     A 
     </div> 


     <div class="col-md-6"> 
      <div class='row'> 
        <div class="col-md-12">B1</div> 
      </div> 
      <div class='row'> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 
      <div class='row'> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 

     <div class="col-md-3"> 
     C 
     </div> 
    </div> 

</div> 

Answer 3

ような何かするときにはB.

<div class="container-fluid"> 

    <div class="row"> 
     <div class="col-md-3"> 
     A 
     </div> 


     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-12">B1</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 

     <div class="col-md-3"> 
     C 
     </div> 
    </div> 

</div> 

Answer 4

内部の子供たちのために行のdivを追加する必要があります任意のCSSの休憩を避けるために、行の内側にあなたのコラムを包みます列のスペースを使わないでレイアウトを改善するには、の中に列をラップするか、間隔を空けてレイアウトするにはclearfixを使用します。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3">A</div> 
     <div class="col-md-6"> 
      <div class="clearfix"> 
       <div class="col-md-12">B1</div> 
      </div> 
      <div class="clearfix"> 
       <div class="col-md-12"> 
        <div class="clearfix"> 
         <div class="col-md-8">B1.1</div> 
         <div class="col-md-4">B1.2</div> 
        </div> 
       </div> 
      </div> 
      <div class="clearfix"> 
      <div class="col-md-12"> 
       <div class="clearfix"> 
        <div class="col-md-10">B2.1</div> 
        <div class="col-md-2">B2.2</div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3">C</div> 
    </div> 
</div> 

このQ/A、Remove padding from columnsをご覧になることをお勧めします。