做一个bootstrap栅格程序每个格子间设有间隔,要求第一行一列格子,第二行两列格子,第三行三列格子,第四行四列格子,第五行六列格子,第六行十二列格子,
时间: 2024-06-13 07:08:30 浏览: 120
以下是一个满足要求的Bootstrap栅格程序,每个格子间设有间隔:
```html
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1">1</div>
</div>
<div classrow">
<div class="col-md-6 col-sm-6 col-xs-6">2</div>
<div class="col-md-6 col-sm-6 col-xs-6">2</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">3</div>
<div class="col-md-4 col-sm-4 col-xs-4">3</div>
<div class="col-md-4 col-sm-4 col-xs-4">3</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">4</div>
<div class="col-md-3 col-sm-3 col-xs-3">4</div>
<div class="col-md-3 col-sm-3 col-xs-3">4</div>
<div class="col-md-3 col-sm-3 col-xs-3">4</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2">6</div>
<div class="col-md-2 col-sm-2 col-xs-2">6</div>
<div class="col-md-2 col-sm-2 col-xs-2">6</div>
<div class="col-md-2 col-sm-2 col-xs-2">6</div>
<div class="col-md-2 col-sm-2 col-xs-2">6</div>
<div class="col-md-2 col-sm-2 col-xs-2">6</div>
</div>
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
<div class="col-md-1 col-sm-1 col-xs-1">12</div>
</div>
</div>
```
阅读全文