Bootstrap网格系统行

Question

我正在尝试在引导程序中创建一些网格，我不知道我是否正确，所以这是我的HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row bg-white">

        <div style="background-color: #0a4d85" class="col-md-6">
            <div class="col-md-12" style="background-color: #00B312">
                <p>text</p>
            </div>
        </div>

        <div style="background-color: #0000BB" class="col-md-6">
            <div class="row"> <!-- This row -->
                <div class="col-md-12" style="background-color: #0c0c0c">
                    <p>text</p>
                </div>
                <div class="col-md-12" style="background-color: #00a1e8">
                    <p>text</p>
                </div>
            </div>
        </div>
    </div>
</div>

此代码的结果如下（右侧没有填充）： 但是，如果我删除“行”类（在HTML注释中选择）结果是我所期望的：

那怎么样？我做错了什么或排成一行是不好的做法？

Answer 1

Bootstrap网格基于12列布局。容器，行和列有三个主要组件。行是水平的列组，可确保列正确排列。因此，Row in row is not good practice。 Column classes indicate the number of columns you’d like to use out of the possible 12 per row.因此，如果您想要三个等宽列，则可以使用.col-md-4。