做一个bootstrap栅格程序,要求第一行一列格子,第二行两列格子,第三行三列格子,第四行四列格子,第五行六列格子,第六行十二列格子,每行每列格子间设有间隔
时间: 2024-06-13 22:08:47 浏览: 122
以下是符合要求的Bootstrap栅格程序,每行每列格子间都有间隔:
```html
<div class="container">
<div class="row">
<div class="col-md-12 mb-3">
第一行一列格子
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
第二行左侧格子
</div>
<div class="col-md-6 mb-3">
第二行右侧格子
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
第三行左侧格子
</div>
<div class="col-md-4 mb-3">
第三行中间格子
</div>
<div class="col-md-4 mb-3">
第三行右侧格子
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
第四行左侧格子
</div>
<div class="col-md-3 mb-3">
第四行中间左侧格子
</div>
<div class="col-md-3 mb-3">
第四行中间右侧格子
</div>
<div class="col-md-3 mb-3">
第四行右侧格子
</div>
</div>
<div class="row">
<div class="col-md-2 mb-3">
第五行左侧格子
</div>
<div class="col-md-2 mb-3">
第五行中间左侧格子
</div>
<div class="col-md-2 mb-3">
第五行中间右侧格子
</div>
<div class="col-md-2 mb-3">
第五行右侧左侧格子
</div>
<div class="col-md-2 mb-3">
第五行右侧中间格子
</div>
<div class="col-md-2 mb-3">
第五行右侧右侧格子
</div>
</div>
<div class="row">
<div class="col-md-1 mb-3">
第六行左侧格子
</div>
<div class="col-md-1 mb-3">
第六行中间左侧格子
</div>
<div class="col-md-1 mb-3">
第六行中间左侧中间格子
</div>
<div class="col-md-1 mb-3">
第六行中间右侧中间格子
</div>
<div class="col-md-1 mb-3">
第六行中间右侧格子
</div>
<div class="col-md-1 mb-3">
第六行右侧右侧左侧格子
</div>
<div class="col-md-1 mb-3">
第六行右侧右侧中间左侧格子
</div>
<div class="col-md-1 mb-3">
第六行右侧右侧中间右侧格子
</div>
<div class="col-md-1 mb-3">
第六行右侧右侧右侧左侧格子
</div>
<div class="col-md-1 mb-3">
第六行右侧右侧右侧中间格子
</div>
<div class="col-md-1 mb-3">
第六行右侧右侧右侧右侧格子
</div>
</div>
</div>
```
阅读全文