Bootstrap图片无法自适应缩放及布局堆叠异常求助

我帮你排查了下代码里的问题，主要有几个点导致小屏幕下布局异常，咱们一步步来修正：

问题分析 #

• 嵌套栅格结构错误：你直接给第二个row加了col-lg-6 col-sm-12类，这违反了Bootstrap栅格的嵌套规则——嵌套的row必须放在父级col元素内部，否则负margin会导致布局错位。
• 图片固定宽高限制：小图的style里写死了height:176px;width:264px，这会覆盖img-responsive的自适应特性，在小屏幕下图片没法自动缩放。
• 重复ID问题：多个图片用了同一个id="projectImage"，ID在HTML里必须唯一，虽然不直接影响布局，但属于语法错误，建议改成class。

解决方案 #

按照下面的步骤修改代码：

1. 修复嵌套栅格：把第二个row包裹在一个单独的col-lg-6 col-sm-12容器里，保持栅格结构的正确性。
2. 移除固定宽高：删掉小图的height和width内联样式，让img-responsive发挥作用。
3. 替换重复ID为class：把id="projectImage"改成class="projectImage"，保证HTML语法合规。

修正后的完整代码 #

<div class="col-xs-12"> 
  <h3 style="margin-top:50px"> Key Projects </h3> 
  <div class="row"> 
    <!-- 左侧大图容器 -->
    <div class="col-lg-6 col-sm-12"> 
      <img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="Main project image" class="img-responsive ">
    </div> 
    <!-- 右侧小图容器：先加col，再嵌套row -->
    <div class="col-lg-6 col-sm-12">
      <div class="row"> 
        <div class="col-xs-6">
          <img class="projectImage img-responsive" src="https://placeimg.com/264/176/arch" alt="Project thumbnail">
        </div>
        <div class="col-xs-6">
          <img class="projectImage img-responsive" src="https://placeimg.com/264/176/arch" alt="Project thumbnail">
        </div>
        <div class="col-xs-6">
          <img class="projectImage img-responsive" src="https://placeimg.com/264/176/arch" alt="Project thumbnail">
        </div>
      </div>
    </div> 
  </div> 
</div>

额外优化说明 #

• 我给每个小图都加了col-xs-6类，这样在小屏幕下每一行会显示2张图；如果你想让小图全屏堆叠，把col-xs-6改成col-xs-12就行。
• 给图片添加了有意义的alt文本，提升页面可访问性。

现在你再用Chrome调试工具调整屏幕尺寸，应该就能看到大图占满一行，小图在下方整齐自适应排列了。

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