Bootstrap5响应式侧边栏布局问题：第二行图片显示在侧边栏下方

问题原因 #

你当前使用的Bootstrap栅格系统默认是整行12列流式排列：

• 第一行总宽度刚好被占满：侧边栏col-3 + 3张各占col-3的图片 = 12列
• 第二行的3个col-3没有独立的右侧容器包裹，直接放在外层row中，会自动从新行的最左侧开始排列，刚好落在高度更高的侧边栏下方，就出现了你遇到的布局错位问题。

解决方案 #

把所有图片区域打包放到一个单独的col-9右侧容器中，再在容器内部用row管理图片排列即可，调整后的代码如下：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <!-- 可选：侧边栏滚动固定样式 -->
  <style>
    .vertical-test{
      position: sticky;
      top: 1rem;
    }
  </style>
</head>
<body>
  <div class="row mt-5">
    <!-- 侧边栏 占3列 -->
    <div class="col-3 vertical-test">
      <nav class="navbar navbar-expand-lg navbar-light">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav flex-column p-2">
            <li class="nav-item">
              <a class="navbar-brand active" href="#">DIABLO DAILY</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">NEW ITEMS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">BRANDS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <!-- 右侧图片区域 占9列 -->
    <div class="col-9">
      <div class="row g-3">
        <div class="col-4">
          <img class="img-fluid shadow" src="https://via.placeholder.com/120">
        </div>
        <div class="col-4">
          <img class="img-fluid shadow" src="https://via.placeholder.com/120">
        </div>
        <div class="col-4">
          <img class="img-fluid shadow" src="https://via.placeholder.com/120">
        </div>
        <div class="col-4">
          <img class="img-fluid" src="https://via.placeholder.com/120">
        </div>
        <div class="col-4">
          <img class="img-fluid" src="https://via.placeholder.com/120">
        </div>
        <div class="col-4">
          <img class="img-fluid" src="https://via.placeholder.com/120">
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>

补充说明 #

• 右侧内部row的图片用col-4是因为内部容器宽度为12列，3张图等分刚好每块占4列，和你原来的布局宽度一致
• 新增的sticky样式是可选优化，滚动页面时侧边栏会固定在顶部，不会随着内容滚动消失，移动端折叠功能不受影响

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