bootstrap媒体查询与栅格系统的冲突

1:Bootstrap主要用到min-width、max-width,以及and语法,用于在不同的分辨率下设置不同的CSS样式。例:

@media (max-width: 767px) {

/*在小于768像素的屏幕里,这里的样式生效*/

}

@media (min-width: 768px) and (max-width: 991px) {

/*在768和991像素之间的屏幕里,这里的样式生效*/

}

@media (min-width: 992px) and (max-width: 1199px) {

/*在992和1199像素之间的屏幕里,这里的样式生效*/

}

@media (min-width: 1200px) {

/*在大于1200像素的屏幕里,这里的样式生效*/

}

2:同时使用栅格系统与媒体查询,会在两者交集的地方出现混乱,可以通过去除交集的方式来避免这个冲突

例:

//html结构:

//媒体查询

@media (max-width: 768px) {//可以将768px改为767px

.container-fluid .row p{

color: #fff;

font-size: 16px;

text-align: center;

line-height: 30px;

}

.row .text-left{

margin-top: 20px;

}

}

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容