Question

我已经按照以下方式划分了Bootstrap网格列。

candidates

请在下面找到此代码的可视布局。

我划分网格列的方法是正确还是错误？

Answer 1

始终将列包装在一行中，以避免在调整大小/或类似内容时出现任何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>

Answer 2

您应该为B中的孩子添加行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中为row，b和b1.1, b1.2中的每一列添加b2.1, b2.2 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 4

您应始终将列包裹在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。

划分Bootstrap网格列的最佳方法

4 个答案: