如何在小屏幕上实现图片垂直堆叠？Bootstrap布局调整求助

你的问题核心是响应式类名使用错误，Bootstrap的响应式列类名格式是col-{断点}-{列数}，比如col-sm-12表示小屏幕（≥576px）占12列，而你写的col-ms-12、sm-col-12都是无效类名，导致布局逻辑不生效。

修正后的代码 #

<div class="container">
  <div class="row g-0">
    <div class="col-md-6 col-12">
      <div class="hovereffect">
        <img
          class="img-fluid"
          src="project-images/skylit.jpg"
          alt="Skylit project"
        />
        <div class="overlay">
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-12">
      <div class="hovereffect">
        <img
          class="img-fluid"
          src="project-images/skit4.jpg"
          alt="Skit4 project"
        />
        <div class="overlay">
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-12">
      <div class="hovereffect">
        <img
          class="img-fluid"
          src="project-images/skit6.jpg"
          alt="Skit6 project"
        />
        <div class="overlay">
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-12">
      <div class="hovereffect">
        <img
          class="img-fluid"
          src="project-images/skylit2.jpg"
          alt="Skylit2 project"
        />
        <div class="overlay">
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-12">
      <div class="hovereffect">
        <img
          class="img-fluid"
          src="project-images/lvr.jpg"
          alt="LVR project"
        />
        <div class="overlay">
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-12">
      <div class="hovereffect">
        <img
          class="img-fluid"
          src="project-images/gym.jpg"
          alt="Gym project"
        />
        <div class="overlay">
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• col-md-6：中等屏幕（≥768px）时，每个列占6格，自动形成两列布局。
• col-12：小屏幕（<768px）时，每个列占满12格，自动切换为单列垂直堆叠。
• 移除冗余的<div class="w-100"></div>，Bootstrap的row组件会自动在列数累计满12时换行，无需手动强制换行。
• 删除重复的img-responsive类，img-fluid已经包含了响应式图片的所有样式逻辑。

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