bootstrap 栅格系统怎么用
时间: 2023-07-12 14:03:58 浏览: 80
Bootstrap 栅格系统是用于在不同设备上实现响应式布局的工具。栅格系统将页面布局划分为12列,并使用类名来指定每个元素在不同设备上占用的列数。以下是一个简单的示例:
```html
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">内容1</div>
<div class="col-sm-6 col-md-4">内容2</div>
<div class="col-sm-6 col-md-4">内容3</div>
</div>
</div>
```
在上面的示例中,`container` 类将创建一个带有固定宽度的容器,而 `row` 类将创建一个行,其中包含三个列。在此示例中,每个列在小型设备(如手机)上将占用 6 列,在中型设备(如平板电脑)和大型设备(如台式机)上将占用 4 列。
栅格系统的类名包括:
- `.container`:创建一个固定宽度的容器
- `.container-fluid`:创建一个宽度为 100% 的容器
- `.row`:创建一行,由列组成
- `.col-{设备大小}-{列数}`:指定一个列,其中 `{设备大小}` 可以是 `xs`(超小型设备),`sm`(小型设备),`md`(中型设备)或 `lg`(大型设备),`{列数}` 可以是 1 到 12 的整数,表示该列占用的栅格数。
例如,`.col-sm-6` 将使一个元素在小型设备上占用 6 列,`.col-md-4` 将使一个元素在中型设备上占用 4 列。
你可以在官方文档中了解更多关于栅格系统的详细信息和用法:https://getbootstrap.com/docs/5.1/layout/grid/
相关推荐
![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)