css - 如何在Bootstrap 4中创建外观怪异的网格？

如何在Bootstrap 4中创建外观怪异的网格？例如，

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

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

最佳答案

使用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>

关于css - 如何在Bootstrap 4中创建外观怪异的网格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45496732/