bootstrap在手机端的栅格如何写
时间: 2023-07-16 16:14:46 浏览: 58
Bootstrap提供了一套响应式的栅格系统,可以很方便地在手机端进行布局。
在手机端,可以使用以下类名来定义栅格的列数:
- `.col-`:在任何屏幕大小下都占据整个父容器的宽度。
- `.col-sm-`:在小屏幕设备上占据整个父容器的宽度。
- `.col-md-`:在中等屏幕设备上占据整个父容器的宽度。
- `.col-lg-`:在大屏幕设备上占据整个父容器的宽度。
- `.col-xl-`:在超大屏幕设备上占据整个父容器的宽度。
此外,还可以使用 `.row` 类来创建一个行,并使用 `.container` 或 `.container-fluid` 类来包含整个网页内容。
具体用法可以参考以下示例:
```
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">1</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">2</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">3</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">4</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">5</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">6</div>
</div>
</div>
```
此示例创建了一个包含6个列的行,每个列在不同屏幕大小下占据不同的宽度。在小屏幕设备上,每个列占据一半的宽度;在中等屏幕设备上,每个列占据四分之一的宽度;在大屏幕设备上,每个列占据三分之一的宽度;在超大屏幕设备上,每个列占据六分之一的宽度。
相关推荐
![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)