bootstrap---栅格系统

最新推荐文章于 2021-01-14 14:38:40 发布

学好javascript换名

最新推荐文章于 2021-01-14 14:38:40 发布

阅读量268

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_41644449/article/details/106874123

版权

本文详细介绍了Bootstrap的栅格系统，包括流体容器与固体容器的特性，行内的列数控制，列的平分和自适应宽度，以及偏移量和可见性的设置。通过这些元素，可以创建响应式和灵活的网页布局。

摘要由CSDN通过智能技术生成

网格容器

流体容器（container-fluid）
特点：width=100%即占据整行
CSS样式：

.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
   
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
*, *::before, *::after {
   
    box-sizing: border-box;
}

固体容器（container）
特点：最大宽度根据页面宽度大小作出对应改动
PS：CSS样式同流体容器一致，除@media

	特小 <576px	Small >=576px	Medium >=768px	Large >=992px	特大 >=1200px
max-width	无（自动）	540	720	960	1140
类前缀	col-	col-sm-	col-md-	col-lg-	col-xl-
列宽	-	45	60	80	95

行（row）

CSS主要属性

    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    // margin的值为-15px的目的
    // 使row的width==ontainer和container-fluid的width
    box-sizing: border-box;

行内列数
row-cols-X || row-cols-breakpoint-X

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div