如何在Bootstrap中制作3个网格

Question

有人能告诉我，我怎么能在这样的bootstrap 3网格中做？

Answer 1

你在那里做的只是将div分成两部分， 这可以通过在一行中设置两个col-md-6来完成。

之后，取第二个col并将其分成两个col-md-12。 这将把两个＆＃34;盒子＆＃34;在彼此之上。

完整代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 blue">
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12 red">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 green">
                </div>
            </div>
        </div>
    </div>
</div>

.red {
   background-color: rgb(255,0,0);
   width: 100px;
   height: 100px;
  }

  .green {
   background-color: rgb(0,255,0);
   width: 100px;
   height: 100px;
  }

    .blue {
   background-color: rgb(0,0,255);
   width: 200px;
   height: 200px;
  }