你如何在 Bootstrap 4 中创建奇怪的网格?
How do you create odd looking grids in 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>
如何在 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>