引导网格系统中的列和行无法正常工作

Question

我正在尝试使用Bootstrap-3实现网格系统。我正在使用行和列，但并非所有列的行为都正常，如下面的代码段所示。

＆＃13;

＆＃13;

.pink{
  background: pink;
}

.yellow{
  background: yellow;
}

.gray{
  background: gray;
}

.blue{
  background: blue;
}

.green{
  background: green;
}

.red{
  background: red;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
    <div class="col-md-3 ">
        <div class="row">
            <div class="col-md-12 pink">test</div>
            <div class="col-md-12 yellow">test</div>
        </div>
    </div>
    <div class="col-md-3 gray">
        test
    </div>
    <div class="col-md-6 ">
        <div class="row">
            <div class="col-md-12 blue">test</div>
            <div class="col-md-6 green">test</div>
            <div class="col-md-6 red">test</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12 green">test</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 pink">test</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12 gray">test</div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

这是我的目标设计：
我在角度2项目中使用bootstrap ^ 3.3.7 修改
更新我的代码并添加图像后，我得到了以下设计： 正如您所看到的，在第一行中，粉红色和蓝色 cols的高度不同，以及粉红色 col在第二排。
为什么会这样？

Answer 1

他们将col-*嵌套在另一个col-*内并不是bootstrap建议做的事情。您不应该在另一个父col-*内立即col-*。引导程序表明，在使用任何<div class="row">

时，您应始终将col-*作为直接父级

这是您的问题的解决方案

<div class="container">
    <div class="row">
        <div class="col-md-3 ">
            <div class="row">
                <div class="col-md-12 pink">test</div>
                <div class="col-md-12 yellow">test</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12 gray">test</div>
            </div>
        </div>
        <div class="col-md-6 ">
            <div class="row">
                <div class="col-md-12 blue">test</div>
                <div class="col-md-6 green">test</div>
                <div class="col-md-6 red">test</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12 green">test</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12 pink">test</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12 gray">test</div>
            </div>
        </div>
    </div> 
</div>