求助：根据屏幕宽度切换图片画廊与轮播组件的显示状态

我之前遇到过这样的需求：在屏幕宽度>768px的设备（平板/桌面端）显示3×3图片画廊布局，宽度<768px的设备（移动端）自动切换为图片轮播组件。

一开始踩了两个坑才搞定：

• CSS中未正确使用@media only screen媒体查询
• 遗漏了一个关键的包裹DIV（新手常犯的小失误😂）

如果你也想实现类似的Bootstrap 4布局切换效果，可以通过CSS媒体查询控制不同容器的显示与隐藏来实现，以下是经过验证可用的完整代码片段：

CSS 代码 #

@media only screen and (min-width: 768px) { 
  .slider { display: none; } 
  .block { display: block; } 
}
@media only screen and (max-width: 768px) { 
  .slider { display: block; } 
  .block { display: none; } 
}
.hold-tests { display: flex; width: 100%; }
.col { flex: 1; }

HTML 代码 #

<!--- Start of Gallery Section --->
<div id="hold-tests">
  <div class="col slider">
    <div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
      <div class="carousel-inner col-" role="listbox">
        <!--- First Slide --->
        <div class="carousel-item active">
          <img src="Img/PHportrait.png" alt="background image">
        </div>
        <div class="carousel-item">
          <img src="Img/PHportrait2.png" alt="background image">
        </div>
        <div class="carousel-item">
          <img src="Img/PHportrait.png" alt="background image">
        </div>
      </div>
      <div class="narrow">
        <div class="col-12">
          <p class="lead text-center">Want to see more of my work?</p>
          <!-- add in social media icons and add target="_blank" to open in new tab --->
        </div>
      </div>
    </div>
  </div>
  <div class="col block">
    <div id="gallery" class="offset">
      <div class="col-md">
        <div class="row no-padding">
          <div class="col-md-4">
            <div class="gallery-card">
              <a href="Img/PHportrait.png" target="_blank">
                <img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
              </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery-card">
              <a href="Img/PHportrait.png" target="_blank">
                <img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
              </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery-card">
              <a href="Img/PHportrait.png" target="_blank">
                <img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
              </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery-card">
              <a href="Img/PHportrait.png" target="_blank">
                <img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
              </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery-card">
              <a href="Img/PHportrait.png" target="_blank">
                <img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
              </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery-card">
              <a href="Img/PHportrait.png" target="_blank">
                <img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="narrow">
        <div class="col-12">
          <p class="lead text-center">Want to see more of my work?</p>
          <!-- add in social media icons and add target="_blank" to open in new tab --->
        </div>
      </div>
    </div>
  </div>
</div>
<!--- End of Gallery Section --->

核心逻辑很简单：给轮播和画廊分别加上.slider和.block类，然后通过媒体查询在不同屏幕宽度下控制这两个类的display属性，就能轻松实现布局切换的效果。

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