css - 你如何在 Bootstrap 4 中创建奇怪的网格？

Question

你如何在 Bootstrap 4 中创建奇怪的网格？例如，

最左边的列跨越两行，右边的两行各有 3 个列

||||||||||||||||
|     |  |  |  |
|     |_ |_ |_ |
|     |  |  |  |
|_____|_ |_ |_ |

Answer 1

在使用 Bootstrap 的网格时，您应该考虑列的布局而不是行的布局。列的布局取决于单元格内内容的高度。

为了演示跨越两列的行，我已经固定了行的高度

<div class="container-fluid">
   <div class="row">
      <div class="col col-md-6">
         <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
      </div>
      <div class="col col-md-6">
         <div class="row">
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(52, 152, 219);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(231, 76, 60);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(52, 73, 94);"></div>
            </div>
         </div>
         <div class="row">
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(22, 160, 133);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(230, 126, 34);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(149, 165, 166);"></div>
            </div>
         </div>
      </div>
   </div>
</div>