劃分自舉網格列的最佳方法

我按照以下方式將我的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>

請找到下面這段代碼的可視化佈局。

我的方法是將網格列正確還是錯誤？

來源

2015-12-15 CodeMan

經驗法則：引導列不應該直接嵌套在列中，您總是需要創建一行 –

我會推薦研究[Bootstrap網格系統的基礎]（http://getbootstrap.com/css/ ＃格）。 – totymedli

始終連續在內線換你列，以避免調整時，任何休息的CSS /或類似的東西

<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>

來源

2015-12-15 07:09:25

上面的代碼似乎缺少div容器標籤。儘管你在編輯答案。所以上面的代碼是正確的。 – MarcoZen

只需在B內添加一個row div即可：b，b1.1, b1.2和b2.1, b2.2。這應該有所幫助。

<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>

來源

2015-12-15 07:09:12 deem

B1.1

B1.2

B2.1

B2.2

– CodeMan

上述命令代碼是正確的嗎？ – CodeMan

我爲你放置了代碼，我認爲我的第一個答案版本太少了。你可以檢查它:) – deem

你應該爲孩子裏面添加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>

來源

2015-12-15 07:11:37 mrkre

行的div您應始終將您的列包裝在row內，以獲得更好的佈局，而無需在列中間隔，或者使用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>

您可能有興趣查看此問題的答案，Remove padding from columns。

來源

2015-12-15 07:24:40

劃分自舉網格列的最佳方法

回答

相關問題