发表于： 2019-07-18 21:03:52
1 791
完成了什么：
完成任务14-15
遇到了什么问题：
页面三进行的时候发现container一开始布局设置弄了width：80%。没有给一个@media (min-width: 1200px)
.container {
max-width: 1140px;
}
才导致挤成这样，权重顺序这些太重要了，一放错可能稀里糊涂都不知道什么原因，怎么看都没问题那种；
收获了什么：
权重，代码不规划亲人俩行泪，之前写的任务代码逻辑太差劲了，导致后面花了很多时间去修修补补；
整理了下引用到的bootstrap框架内容：
,
*::before,
*::after {
box-sizing: border-box;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-6,
.col-sm-6,
.col-xl-4,
.col-12,
.col-lg-3,
.col-lg-2,
.col-lg-4,
.col-md-12,
.col-sm-12,
.col-lg-9 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 576px) {
.col-sm-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 768px) {
.col-md-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-md-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 992px) {
.col-lg-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
}
@media (min-width: 1200px) {
.col-xl-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
明天计划：
继续任务；
返回列表
评论