Bootstrap 4 仅移动端折叠.card div的最佳实现方案（无需JS）

嘿，这个问题我当初刚上手Bootstrap 4的时候也纠结过！你用媒体查询反向处理的思路其实没问题，但Bootstrap本身就提供了更简洁的内置方案，完全不用自己写额外的CSS，来给你梳理下最佳实现方式：

方法1：用Bootstrap内置的响应式工具类（推荐） #

Bootstrap 4的工具类里有一套响应式的d-{breakpoint}-{display}类，可以帮我们轻松控制不同屏幕下的元素显示状态，完美适配你的需求：

• 控制触发按钮的显示：只在移动端显示折叠/展开按钮，大屏隐藏它，用d-block.d-lg-none类（lg对应992px断点，如果你要调整断点，比如md（768px）就换成d-md-none）。
• 控制卡片内容的折叠状态：默认让内容折叠（加collapse类），同时用d-lg-block强制在大屏显示内容，这个类会覆盖collapse的display: none样式，不需要额外写媒体查询。

完整代码示例：

<div class="card">
  <div class="card-header">
    <!-- 仅移动端显示的触发按钮 -->
    <button class="btn btn-link d-block d-lg-none" data-toggle="collapse" data-target="#mobileCollapseCard">
      点击查看卡片内容
    </button>
  </div>
  <!-- 移动端折叠，大屏自动展开 -->
  <div id="mobileCollapseCard" class="collapse d-lg-block">
    <div class="card-body">
      这里是你的卡片内容啦～在手机上需要点击按钮展开，平板及以上尺寸会直接显示。
    </div>
  </div>
</div>

方法2：自定义媒体查询（适合特殊需求） #

如果你因为某些场景需要自己写CSS（比如要自定义断点或特殊样式），那你的思路是对的，但要注意样式优先级：

/* 在≥992px的屏幕上取消折叠状态 */
@media (min-width: 992px) {
  #mobileCollapseCard.collapse {
    display: block !important;
  }
}

不过这种方法不如工具类简洁，除非有特殊需求，否则优先用方法1。

额外提醒 #

别忘了确保你已经正确引入了Bootstrap的CSS和JS文件（collapse组件依赖jQuery和Bootstrap的JS），否则点击按钮不会有效果哦～

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