css - 划分 Bootstrap 网格列的最佳方法

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

始终将您的列包裹在一行中，以避免在调整大小时或类似情况时出现任何 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>