Bootstrap搭建的个人作品集移动端响应式异常及横向滚动问题求解

问题原因&修复方案 #

核心问题1：栅格结构不规范

Bootstrap 的 row 容器的直接子元素必须是带 col-* 前缀的栅格列元素，你代码中第二个 <div class="row"> 直接将 img 标签作为子元素，没有套栅格列容器，row 自带的左右负margin会和未包裹的图片共同导致容器宽度溢出，是移动端横向滚动条的主要诱因。

核心问题2：响应式断点配置缺失

你只给列配置了中等屏幕断点的宽度规则 col-md-*，没有配置小屏、超小屏的宽度规则，小屏幕下栅格列默认宽度表现不符合预期，直接导致响应式布局失效。同时第一个row的两列栅格数总和仅为8（7+1），未占满Bootstrap默认的12份栅格，也会引发布局偏移。

核心问题3：图片未做自适应限制

所有展示图片没有添加Bootstrap自带的自适应类 img-fluid，原始尺寸过大的图片会直接撑宽父容器，进一步加重宽度溢出问题。

修复后参考代码 #

<div class="container">    
  <h2 class="text-center p-3">PROJECTS</h2>    
  <div class="row align-items-center">
    <!-- 小屏幕占8列，中等屏幕占7列 -->
    <div class="col-8 col-md-7 text-center order-sm-last">
      <h5 class="educare">Title</h5>
      <p class="text-justify py-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <p class="text-center py-1 tech-stack">
        Tech Stack:
        <img src="https://img.icons8.com/doodle/48/000000/squarespace.png" class="img-fluid" alt="squarespace"/>
        <img src="https://img.icons8.com/ios-filled/50/000000/html.png" class="img-fluid" alt="html"/>
        <img src="https://img.icons8.com/ios-filled/50/000000/css.png" class="img-fluid" alt="css"/>
      </p>
    </div>
    <!-- 小屏幕占4列，中等屏幕占1列，小屏幕排在前面 -->
    <div class="col-4 col-md-1 text-left order-sm-first">
      <img src="..." class="educ-image img-fluid" alt="项目展示图">
    </div>
    <!-- 剩余栅格如果不需要可以留空，也可根据需求调整列宽凑满12份 -->
  </div>
  <div class="row align-items-center">
    <!-- 给gif套上栅格列 -->
    <div class="col-12 col-md-4">
      <img src="./images/venture.gif" class="mr-auto venture-gif img-fluid" alt="venture演示">
    </div>
    <div class="col-12 col-md-8 text-center">
      <h5 class="venture-txt">Venture Capital Funds Website</h5>
      <p class="text-justify py-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <p class="text-center py-1 tech-stack">
        Tech Stack:
        <img src="https://img.icons8.com/windows/32/000000/wix.png" class="img-fluid" alt="wix"/>
        <img src="https://img.icons8.com/ios-filled/50/000000/adobe-photoshop--v1.png" class="img-fluid" alt="ps"/>
        <img src="https://img.icons8.com/ios-filled/50/000000/adobe-illustrator.png" class="img-fluid" alt="ai"/>
      </p>
    </div>
  </div>
</div>

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