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;

}

}