学习 Bootstrap 5 之 容器
容器 (Containers)
1. 什么是容器?
容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。
可以简单理解为人家写好的样式, 只需要我们在class种加入这些容器对应的名字, 就可以使用这些已经写好的样式了, 但是, 要想使用他们, 需要先了解他们
2. 三种容器
Bootstrap有三种容器
(1). .container
这种容器在每一个响应式的断点中都设置了一个最大宽度值, 即当视口宽度达到这些指定的值, 则使用了这个容器的标签显示出来的东西宽度会发生改变
(2). .container-fluid
这种容器的宽度是父元素宽度的100%, 即无论视口宽度是多少, 这种容器中的标签显示出来的宽度都是父元素宽度的100%
(3). .container-{断点}
这种容器的宽度取决于设置的断点的值, 如果大于断点的宽度, 则按照断点宽度的值, 否则就是父元素宽度的100%
(4). 容器宽度表格
| 类名 | Extra small < 576px |
Small ≥ 576px |
Medium ≥ 768px |
Large ≥ 992px |
Extra Large ≥ 1200px |
Extra extra Large ≥ 1400px |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
例如 ≥ 1400px的意思是, 当视口宽度大于1400像素时, 如果容器使用了container, 则宽度1320像素, 如果容器使用了container-fluid, 则宽度是父元素宽度的100%
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122819.html
