container-fluid是干嘛用的
时间: 2024-05-26 13:13:19 浏览: 14
`container-fluid` 是 Bootstrap 框架中的一个类,用于创建一个全宽度的容器。它会在容器的左右两侧留下一些间距,使得容器能够水平铺满整个屏幕。`container-fluid` 通常用于需要铺满整个屏幕的背景图或者全屏幻灯片等场景。相对于 `container` 类,`container-fluid` 更加自适应,可以适应不同设备的屏幕大小。
相关问题
container-fluid 和row
`container-fluid` 和 `row` 都是 Bootstrap 中用于布局的类。
`container-fluid` 是一个容器类,用于创建一个宽度为 100% 的容器。这个容器会在屏幕宽度变化时自动调整大小,以适应各种设备的屏幕大小。通常情况下,你会将其他元素放在 `container-fluid` 中,以便自适应屏幕宽度的布局。
`row` 是 Bootstrap 的网格系统中用于创建行的类。它是一个水平的 flexbox 容器,用于将列排列在一行中。在 `row` 中添加 `col` 类可以创建网格系统的列,这些列可以设置为不同的宽度和偏移量,以实现各种布局需求。在布局时,通常会将 `row` 作为 `container-fluid` 的子元素来使用。
container-fluid
"container-fluid" 是 Bootstrap 框架中的一个 class,用于创建一个宽度为100%的容器。与 "container" class 不同的是,"container" class 会限制容器的最大宽度,而 "container-fluid" 则会让容器的宽度随着浏览器窗口的大小变化而自适应调整。通常,"container-fluid" 用于创建全宽度的页面元素,如导航栏、页眉、页脚等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)