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栅格系统与自己额外定义的媒体查询的冲突问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

# boostrap  # 栅格系统  # BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、  # Bootstrap布局之栅格系统详解  # Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统  # 第五章之BootStrap 栅格系统  # 学习使用bootstrap3栅格系统  # Bootstrap入门书籍之（三）栅格系统  # Bootstrap每天必学之栅格系统（布局）  # 小编  # 的是  # 是在  # 也有  # 没有任何  # 我又  # 给大家  # 写了  # 却在  # 如图  # 这在  # 所占  # 解决办法  # 所述  # 给我留言  # 根本原因  # 有一个  # 出现了  # 有任何  # 使用了 

相关文章： 如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  如何用AWS免费套餐快速搭建高效网站？  c# await 一个已经完成的Task会发生什么  教程网站设计制作软件,怎么创建自己的一个网站？  音响网站制作视频教程,隆霸音响官方网站？  如何快速上传自定义模板至建站之星？  ,如何利用word制作宣传手册？  php8.4新语法match怎么用_php8.4match表达式替代switch【方法】  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  无锡营销型网站制作公司,无锡网选车牌流程？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  建站之星免费版是否永久可用？  深入理解Android中的xmlns:tools属性  平台云上自主建站：模板化设计与智能工具打造高效网站  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  *服务器网站为何频现安全漏洞？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何自定义建站之星模板颜色并下载新样式？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  南宁网站建设制作定制,南宁网站建设可以定制吗？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  建站org新手必看：2024最新搭建流程与模板选择技巧  家庭建站与云服务器建站，如何选择更优？  如何快速搭建支持数据库操作的智能建站平台？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  建站之星如何防范黑客攻击与数据泄露？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  如何在万网自助建站中设置域名及备案？  小程序网站制作需要准备什么资料,如何制作小程序？  模具网站制作流程,如何找模具客户？  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  如何续费美橙建站之星域名及服务？  如何选择高效可靠的多用户建站源码资源？  定制建站价位费用解析与套餐推荐全攻略  盘锦网站制作公司,盘锦大洼有多少5G网站？  焦点电影公司作品,电影焦点结局是什么？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  建站之星代理费用多少？最新价格详情介绍  手机网站制作与建设方案,手机网站如何建设？  建站之星如何一键生成手机站？  婚礼视频制作网站,学习*后期制作的网站有哪些？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  建站之星后台密码如何安全设置与找回？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  如何通过PHP快速构建高效问答网站功能？  如何选购建站域名与空间？自助平台全解析  如何在阿里云部署织梦网站？  建站之星ASP如何实现CMS高效搭建与安全管理？