如何在移动设备上隐藏基于Bootstrap 4构建的轮播组件？

嘿，这个问题其实很简单，Bootstrap 4本身就提供了现成的响应式工具类，帮你轻松实现不同屏幕尺寸下的元素显示/隐藏控制，当然也可以用自定义CSS来实现，下面给你两种最常用的方法：

方法一：使用Bootstrap 4内置的响应式隐藏类 #

Bootstrap 4定义了一套基于屏幕断点的显示/隐藏类，你只需要给轮播容器加上对应的类就能搞定。

如果你想在**移动端（小屏幕及以下，也就是屏幕宽度<768px）**隐藏轮播，在中等屏幕及以上显示，直接给轮播的最外层div添加d-none d-md-block类：

<div id="yourCarousel" class="carousel slide d-none d-md-block" data-ride="carousel">
  <!-- 轮播内部内容 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="your-image-1.jpg" class="d-block w-100" alt="描述文本">
    </div>
    <div class="carousel-item">
      <img src="your-image-2.jpg" class="d-block w-100" alt="描述文本">
    </div>
  </div>
</div>

• d-none：默认让元素在所有屏幕下隐藏
• d-md-block：覆盖d-none的设置，让元素在**中等屏幕（≥768px）**及以上尺寸正常显示

如果你的需求更精细，比如只想在**超小屏幕（<576px）**隐藏轮播，小屏幕及以上显示，那就用d-xs-none d-sm-block类替换上面的类即可。

方法二：自定义CSS媒体查询 #

如果你需要更灵活的控制（比如自定义隐藏的屏幕宽度阈值），可以写一段自定义CSS：

/* 在屏幕宽度≤767px时隐藏轮播 */
@media (max-width: 767px) {
  #yourCarousel {
    display: none !important;
  }
}

这里的max-width:767px对应Bootstrap 4的小屏幕断点以下，也就是移动端范围。加上!important是为了确保自定义样式能覆盖Bootstrap的默认轮播样式，避免冲突。

小提示 #

优先推荐使用Bootstrap内置的响应式类，因为这些类是框架官方维护的，兼容性更好，也更符合Bootstrap的开发规范，不用额外写CSS代码～

内容的提问来源于stack exchange，提问作者Олександр Семенюк