如何为Div应用Bootstrap栅格系统实现响应式布局？

Hey there! Let's clear up your Bootstrap grid confusion step by step.

先说说你尝试的写法问题 #

你的思路方向是对的，但有两个小细节需要修正：

• 你把原来的id="gallery"写成了class="gallery"，而你的CSS是针对#gallery（ID选择器）的，这样样式就不会生效了，得保持id="gallery"不变。
• Bootstrap的栅格系统需要**容器（container/container-fluid）**作为最外层，你的代码里缺少了这一层，row应该放在容器里面才能正常发挥栅格的作用。

正确的栅格应用方法 #

Bootstrap栅格的核心结构是：
容器（container/container-fluid） → row → 列（col-*）

针对你的gallery场景，完整的正确代码应该是这样的：

<!-- 用container-fluid可以让内容占满整个视口宽度，用container则会有固定宽度并居中 -->
<div class="container-fluid">
  <div class="row">
    <!-- col-sm-12表示在小屏幕（≥576px）及以上占满整行，更小屏幕会自动堆叠 -->
    <div class="col-sm-12">
      <div id="gallery">
        <a href="aboutus.aspx"> 
          <img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" /> 
        </a> 
        <a href="http://expogr.com/" target="_blank"> 
          <img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" /> 
        </a> 
        <a href="addlisting.aspx"> 
          <img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" /> 
        </a>
        <a href="dubaiexhibitions.aspx"> 
          <img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt="" rel="a" /> 
        </a>
      </div>
    </div>
  </div>
</div>

额外的响应式优化建议 #

你原来的CSS里给#gallery设置了固定高度height:282px，在响应式场景下可能会导致图片被拉伸或者裁剪。可以做以下调整：

• 把固定高度改成max-height:282px，允许高度在小屏幕上自动缩小
• 给图片添加object-fit:cover属性，让图片保持比例同时填充容器：

#gallery {
  position: relative;
  max-height: 282px;
  overflow: hidden; /* 裁剪超出部分 */
}

#gallery img {
  object-fit: cover;
  width: 100%; /* 确保图片占满列宽度 */
  height: auto; /* 高度自适应 */
}

这样你的gallery就能完美适配不同屏幕尺寸啦！

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