划分自举网格列的最佳方法

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

划分自举网格列的最佳方法

回答

相关问题