做一个bootstrap栅格系统,要求第一行一列格子,第二行两列格子,第三行三列格子,第四行四列格子,第五行六列格子,第六行十二列格子
时间: 2024-06-13 14:08:47 浏览: 89
Bootstrap栅格系统简单实现代码
以下是实现要求的Bootstrap栅格系统代码:
```html
<div class="container">
<div class="row">
<div class="col-md-12">第一行一列格子</div>
</div>
<div class="row">
<div class="col-md-6">第二行左侧格子</div>
<div class="col-md-6">第二行右侧格子</div>
</div>
<div class="row">
<div class="col-md-4">第三行左侧格子</div>
<div class="col-md-4">第三行中间格子</div>
<div class="col-md-4">第三行右侧格子</div>
</div>
<div class="row">
<div class="col-md-3">第四行左侧格子</div>
<div class="col-md-3">第四行中间左侧格子</div>
<div class="col-md-3">第四行中间右侧格子</div>
<div class="col-md-3">第四行右侧格子</div>
</div>
<div class="row">
<div class="col-md-2">第五行左侧格子</div>
<div class="col-md-2">第五行中间左侧格子</div>
<div class="col-md-2">第五行中间格子</div>
<div class="col-md-2">第五行中间右侧格子</div>
<div class="col-md-2">第五行右侧格子</div>
<div class="col-md-2">第五行右侧格子</div>
</div>
<div class="row">
<div class="col-md-1">第六行左侧格子</div>
<div class="col-md-1">第六行中间左侧格子</div>
<div class="col-md-1">第六行中间左侧格子</div>
<div class="col-md-1">第六行中间左侧格子</div>
<div class="col-md-1">第六行中间右侧格子</div>
<div class="col-md-1">第六行中间右侧格子</div>
<div class="col-md-1">第六行中间右侧格子</div>
<div class="col-md-1">第六行中间右侧格子</div>
<div class="col-md-1">第六行右侧格子</div>
<div class="col-md-1">第六行右侧格子</div>
<div class="col-md-1">第六行右侧格子</div>
</div>
</div>
```
阅读全文