使用bootstrap做一个栅格系统,让超大屏和大屏一行显示12个栅格,中屏一号显示6个栅格,小屏一行显示4个栅格,超小屏一行显示一个栅格。
时间: 2023-12-16 20:04:11 浏览: 34
可以使用 Bootstrap 的栅格系统来实现要求的布局,代码如下:
```html
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
<div class="col-lg-1 col-md-1 col-sm-2 col-12"></div>
</div>
</div>
```
上面的代码中,我们使用了 Bootstrap 的 `container` 和 `row` 类来创建一个栅格系统的容器和行。每个栅格使用了不同的 `col-lg-*`、`col-md-*`、`col-sm-*` 和 `col-*` 类来指定在不同屏幕尺寸下的宽度比例。其中 `col-lg-*` 和 `col-md-*` 分别用于超大屏和大屏,`col-sm-*` 用于中屏,`col-*` 用于小屏和超小屏。
在超大屏和大屏下,每个栅格都占据了 1/12 的宽度,因此一行可以显示 12 个栅格;在中屏下,每个栅格占据了 1/6 的宽度,因此一行可以显示 6 个栅格;在小屏下,每个栅格占据了 1/4 的宽度,因此一行可以显示 4 个栅格;在超小屏下,每个栅格占据了整个屏幕的宽度,因此一行只能显示一个栅格。
当屏幕尺寸发生变化时,Bootstrap 会自动调整栅格的宽度比例,以适应不同的屏幕大小。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)