bootstrap4了解

cyany 2021-08-06 原文

.container 类
@media (min-width: 1200px)
.container {
    max-width: 1140px;
}

@media (min-width: 992px)
.container {
    max-width: 960px;
}
@media (min-width: 768px)
.container {
    max-width: 720px;
}
@media (min-width: 576px)
.container {
    max-width: 540px;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

--------------
.container-fluid 直接全宽，没有设置媒体断点
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.col-sm 由于bootstrap4采用flex，所以可以使用弹性布局，不需要定义具体数值
@media (min-width: 576px)
.col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
当然了，还是可以继续使用以前的12栅格布局，不过他们还是用flex写的，不是百分比
.col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col 均分
.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-6 
.col-6设置一半的宽度
100/12*5   .col-5    41.66666666666667

.col-{breakpoint}-auto 
.col-md-auto 设置在不同终端下的具体内容下的宽度

----------
在垂直方面上的
  <div class="row align-items-start">
在水平方面上的
<div class="row justify-content-start">