Bootstrap环境下移动端媒体查询失效，无法移除Div边框

首先，我明白你在使用Bootstrap时，想通过Media Query移除移动端div边框却遇到了问题——这确实是个常见的小坑，咱们一步步来排查解决：

方法一：用Bootstrap自带的响应式边框类（最推荐） #

Bootstrap本身就提供了响应式的边框工具类，完全不用自己写Media Query，省心又不容易出错。你只需要把原来的border类替换成**border-lg**：

<div class="container games mobile"> 
  <div class="row"> 
    <div class="col-lg-8 div border-lg"> 
      <!-- 内容 -->
    </div>
  </div>
</div>

border-lg的作用是：只有当屏幕宽度≥Bootstrap的lg断点（默认992px）时才显示边框，小于这个宽度的移动端会自动移除边框，完美契合你的需求。

方法二：自定义Media Query（如果一定要自己写） #

如果你坚持用自定义的Media Query，那需要注意两个关键问题：

1. 确保自定义CSS的引入顺序 #

你的自定义CSS文件必须放在Bootstrap的CSS文件之后引入，这样自定义样式的优先级才会高于Bootstrap的默认样式，比如：

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.css">
<!-- 再引入你的自定义CSS -->
<link rel="stylesheet" href="your-custom.css">

2. 正确编写Media Query和选择器 #

Bootstrap的移动端断点（小于sm）对应的是max-width: 767.98px（用.98px是为了避免和sm断点的768px冲突），同时选择器要足够具体，确保能覆盖原有样式：

/* 先给元素设置默认边框 */
.col-lg-8.div.border {
  border: 1px solid #ccc; /* 替换成你实际的边框样式 */
}

/* 移动端移除边框 */
@media (max-width: 767.98px) {
  .col-lg-8.div.border {
    border: none;
    /* 或者用 border-width: 0; 效果一样 */
  }
}

额外排查点 #

• 检查你的Media Query语法有没有错误，比如括号、大括号是否闭合，单位是否正确；
• 如果还是不生效，可以临时加!important测试（但不推荐长期使用，会增加样式维护难度）：

@media (max-width: 767.98px) {
  .col-lg-8.div.border {
    border: none !important;
  }
}

内容的提问来源于stack exchange，提问作者Kirtle