划分 Bootstrap 网格列的最佳方法

Posted 2023-03-05

【中文标题】划分 Bootstrap 网格列的最佳方法

【英文标题】：Best approach to divide Bootstrap grid columns

【发布时间】：2016-03-20 20:58:39

【问题描述】：

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

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

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

【问题讨论】：

经验法则：引导列不应该直接嵌套在列中，您总是需要创建一行

我建议学习foundations of the Bootstrap grid system。

【参考方案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>

【讨论】：

上面的代码似乎缺少 div 容器标签。尽管我们编辑了答案，但它在那里。所以上面的代码是正确的。

【参考方案2】：

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

您可能有兴趣查看此 Q/A，Remove padding from columns。

【参考方案3】：

您应该为 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>

【参考方案4】：

只需在 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>

【讨论】：

B1 B1.1 B1.2 B2.1 B2.2

我为你放置了代码，我认为我的第一个版本的答案有点太少了。你可以在那里查看:)