Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
作者：sinat_27088253 发布时间：2024-04-16 08:59:46
标签：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栅格系统与自己额外定义的媒体查询的冲突问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
来源：http://blog.csdn.net/sinat_27088253/article/details/55803018
0
投稿猜你喜欢
同步：就是在执行栈中（主线程）执行的代码异步：就是在异步队列（macroTask、microTask）中的代码简单理解区别就是：异步是需要延- 背景在实际项目实施中，会编写很多在服务器执行的作业脚本。程序中凡是涉及到数据库链接、操作系统用户链接、IP地址、主机名称的内容都是敏感信息。
- Python 面向对象方法没有重载#在其他语言中，可以定义多个重名的方法，只要保证方法签名唯一即可。方法签名包含3个部分：方法名、参数数量、
- python类class定义及其初始化定义类，功能，属性一般类名首字母大写class Calculator:#名字和价格是属性
- 前言本专栏内容目前已经比较系统了，核心内容也相对完整，本系列文章会根据Spring Security社区的发展逐步的更新内容。请大家多多关注
- 本文给大家介绍vue2.0+webpack环境构造过程。1.首先新建一个目录vue-wkdemo，这是我们的项目目录。执行 npm init
- 背景临时表空间用来管理数据库排序操作以及用于存储临时表、中间排序结果等临时对象，相信大家在开发中经常会遇到相关的需求，下面本文将给大家详细J
- 本文主要讲述：自定义树形控件<el-tree>需求说明：Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点
- 枚举是常用的功能,看看Python的枚举.from enum import EnumMonth = Enum('Month'
- 本文实例讲述了Python操作word常见方法。分享给大家供大家参考，具体如下：这里介绍两种方式:使用win32com使用docx1. 使用
- 我就废话不多说了，大家还是直接看代码吧~#文件复制import ossrc_path=r'E:\Pycharm\python100题
- 今天向MySQL数据库中的一张表添加含有中文的数据，可是老是出异常，检查程序并没有发现错误，无奈呀，后来重新检查这张表发现表的编码方式为la
- 之前一直在写有关scrapy爬虫的事情，今天我们看看使用scrapy如何把爬到的数据放在MySQL数据库中保存。有关python操作MySQ
- 本文实例讲述了Python with关键字，上下文管理器，@contextmanager文件操作。分享给大家供大家参考，具体如下：demo.
- 所以就怀疑是否编码问题，或者文件权限问题，或者是不是函数不支持问题，经过排查发现原来是万网的L1主机不支持fsockopen，在文件uc_c
- 1 文件'''文件存储文件主名.扩展名'''Python中常有的数据文件类型有文本文件、二进
- 本文介绍了python opencv之SIFT算法示例，分享给大家，具体如下：目标：学习SIFT算法的概念 学习在图像中查找SIFT关键的和
- 1.索引问题索引是数据库优化中最常用也是最重要的手段之一，通过索引通常可以帮助用户解决大多数 的SQL性能问题。本章节将对MySQL中的索引
- 1 数据导出 python manage.py dumpdata不指定 appname 时默认为导出所有的apppython manage.
- 交互设计就是研究人与物体之间如何互动的问题，比如按电梯时，按钮立即高亮，同时屏幕上显示电梯现在所在楼层数，这个过程就是交互设计，而电梯按钮用
