Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
更新时间：2017年02月19日 13:51:34 作者：sinat_27088253
这篇文章主要介绍了Boostrap栅格系统与自己额外定义的媒体查询的冲突问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
html结构如下
<div class="row">
<div class="col-sm-6 col-xs-12">
<p class="text-left one">
1111
</p>
</div>
<div class="col-sm-6 col-xs-12">
<p class="text-right two">
2222
</p>
</div>
</div>
我想要实现的效果是在屏幕宽度大于768时，1111左对齐，2222右对齐，小于等于768时居中对齐。于是我又额外写了媒体查询
@media (max-width: 768px) {
.container-fluid .row p{
color: #fff;
font-size: 16px;
text-align: center;
line-height: 30px;
}
.row .text-left{
margin-top: 20px;
}
}
最终展示类似下图
看起来一切正常，但是却在临界点768px时出现了问题,如图
打开控制台，会发现右边的两个图标的样式确实使用了text-align:center;,但是为什么展示出来呈现不一样的效果呢
原因在于父级定义的栅格系统，查看.text-right的父级div，会发现它所占的宽度为50%
因此在屏幕宽度为768px时，既有自己定义的样式，也有原来栅格系统的样式，所以导致混乱，根本原因在于没注意栅格系统的实质
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
栅格系统是用min-width定义的，为大于等于，而我们额外定义的媒体查询用的是max-width,为小于等于，刚好有一个768px的重合，导致最终样式混乱。
解决办法：
去除交集，自己定义媒体查询时，定义max-width:767px
以上所述是小编给大家介绍的Boostrap栅格系统与自己额外定义的媒体查询的冲突问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
每天一对象,今天我们也来new一个。没有系统的学过JS，没有特别的写过一个比较出色的类库，没有运用过一个很强的类库，prototype.js在进行着，慢慢的前进相信不久的将来就可以应用prototype.js来开发自己的应用程序了。2008-10-10
JavaScript在ES6版本后提供了一些更加便捷的方法供开发者使用,实现原理其实是在对应的构造函数原型提供方法,下面这篇文章主要给大家介绍了关于es6中some和every方法使用的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了js实现简单轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了详解从0开始搭建微信小程序(前后端)的全过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
在 JavaScript 中，有一些操作符可以使代码更简洁、易读和高效。这篇文章为大家整理了11个JavaScript中常用操作符的使用，需要的可以参考一下2023-04-04
Javascript 的数组Array,既是一个数组，也是一个字典(Dictionary)。先举例看看数组的用法2012-11-11
cookie的大小是受限制的，并且每次请求cookie都会被发送，浪费宽带，cookie还需要指定作用域，不可以跨域调用。cookie的作用是与服务器进行交互，作为http规范的一部分存在，而webstorage仅仅是为了本地“存储”数据而生。2023-07-07
这篇文章主要介绍了JS实现点击文字对应DIV层不停闪动效果的方法,实例分析了javascript操作div层的效果,非常实用,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
下雪了，这篇文章主要介绍了javascript实现雪花飞舞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
JavaScript中的剩余参数一般使用在**赋值号右侧,或具有迭代属性的数组、函数和对象,这篇文章主要为大家介绍了JavaScript中剩余参数的具体应用,需要的可以参考下2023-11-11
最新评论