Bootstrap4与@media查询冲突：引入CDN后堆叠效果失效的原因及解决方法

嘿，这个问题我之前帮朋友排查过，其实就是Bootstrap 4的两个核心特性在搞事情，咱们一步步拆解：

1. Flexbox 栅格的默认行为 #

Bootstrap 4 彻底把 Flexbox 作为了栅格系统的底层，它的.row类默认是display: flex，而且自带了一套从576px（sm）到1200px（xl）的媒体查询规则，用来控制列的排列。
如果你的自定义堆叠是基于传统的浮动（float）或者块级元素自然换行，Flexbox 的flex-wrap默认值是nowrap（除非你加了.flex-wrap类），会强制子元素在一行挤着，直接把你原来的媒体查询逻辑冲没了。

2. CSS 优先级/加载顺序的锅 #

如果你的自定义 CSS 是在 Bootstrap CDN 之前引入的，那 Bootstrap 的样式会直接覆盖你的规则——毕竟 CSS 同权重下，后加载的样式优先级更高。另外，Bootstrap 的选择器往往更具体（比如.row > .col-md-6），要是你的自定义样式只是用了简单元素选择器或者类，权重不够也会被压下去。

给你几个实用的解决思路，按需选：

方法1：强制覆盖Flexbox行为 #

如果你的布局根本没用到Bootstrap的栅格，只是不小心引了它的全局样式，那直接给你的堆叠容器强制改回非Flex布局就行：

/* 假设你的堆叠容器类是 .custom-stack-wrap */
.custom-stack-wrap {
  display: block !important; /* 强制回到块级布局 */
  float: none !important; /* 重置Bootstrap可能加的浮动 */
}

尽量少用!important，能加更具体的选择器就加，比如body .custom-stack-wrap，这样权重更高，不用!important也能覆盖。

方法2：直接用Bootstrap的响应式类 #

既然都引了Bootstrap，不如直接用它自带的工具类实现堆叠，省得自己写媒体查询：

• 想在小屏幕堆叠、大屏幕并排？给子元素加.col-md-6就行——md及以上屏幕各占一半，小屏幕自动铺满100%堆叠。
• 要自定义堆叠断点？可以用Bootstrap的断点值写原生CSS：

/* 比如在575px以下（Bootstrap的xs断点）强制堆叠 */
@media (max-width: 575px) {
  .custom-stack-item {
    width: 100%;
    display: block;
  }
}

方法3：调整CSS加载顺序 #

把你的自定义CSS文件放在Bootstrap CDN之后引入，这样同权重的选择器，你的样式会覆盖Bootstrap的。比如：

<!-- 先引Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- 再引你的自定义样式 -->
<link rel="stylesheet" href="./your-custom-styles.css">

然后在你的样式里，用和Bootstrap相同或更具体的选择器，比如Bootstrap用.row .col，你就用.container .row .col，权重更高就能覆盖。

方法4：举个实际修复例子 #

假设你原来的代码是这样的：

<div class="my-stack-container">
  <div class="my-stack-item">内容1</div>
  <div class="my-stack-item">内容2</div>
</div>

自定义CSS：

@media (max-width: 768px) {
  .my-stack-item { width: 100%; display: block; }
}
@media (min-width: 769px) {
  .my-stack-item { width: 50%; float: left; }
}

引了Bootstrap后失效，那你可以改成这样（把自定义CSS放在Bootstrap之后）：

.my-stack-container {
  display: block;
  overflow: hidden; /* 清除浮动 */
}
.my-stack-item {
  /* 用更高权重覆盖Bootstrap的样式 */
  width: auto;
  float: none;
}
@media (max-width: 768px) {
  .my-stack-item { width: 100%; }
}
@media (min-width: 769px) {
  .my-stack-item { width: 50%; float: left; }
}

或者更省事，直接用Bootstrap的类：

<div class="row flex-wrap">
  <div class="col-md-6">内容1</div>
  <div class="col-md-6">内容2</div>
</div>

这样不用写自定义媒体查询，Bootstrap会自动帮你处理响应式堆叠。

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