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栅格系统与自己额外定义的媒体查询的冲突问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要介绍了如何用JavaScript让你的浏览器说话，对语音感兴趣的同学，可以实验一下2021-04-04
这篇文章主要介绍了写一个飞快的 JavaScript 打包压缩工具，非常好用，本文给大家分享实现思路,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了JavaScript正则表达式验证登录实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
一篇文章掌握RequireJS常用知识，通过本文，你可以对模块化开发和AMD规范有一个较直观的认识，并详细地学习RequireJS这个模块化开发工具的常见用法，感兴趣的小伙伴们可以参考一下2016-01-01
本文给大家简单探讨下Js数组排序函数sort()的用法和示例，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要介绍了el-date-picker 如何限制选择六个月内的日期,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
呵呵，发现只要几行ＪＳ代码就可实现css的压缩与格式化，非常不错。2009-12-12
javascript中alert()与console.log()的区别
我们在做js调试的时候使用 alert 可以显示信息，调试程序，alert 弹出窗口会中断程序， 如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好2015-08-08
Javascript中的for in循环和hasOwnProperty结合使用
当检测某个对象是否拥有某个属性时，hasOwnProperty 是唯一可以完成这一任务的方法，在 for in 循环时，建议增加 hasOwnProperty 进行判断，可以有效避免扩展本地原型而引起的错误2013-06-06
这篇文章主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最新评论