Bootstrap侧边栏在小屏幕下移问题求助（附代码）

我来帮你梳理下问题原因，再给出几种适配不同需求的解决方案：

问题根源 #

Bootstrap的网格系统是移动端优先的，你用的col-sm-9意味着只有在屏幕宽度≥576px（sm断点）时，内容区才会占据9列宽度；而当屏幕小于这个尺寸时，col-sm-9会自动变成100%宽度（相当于col-12），直接占满整行，侧边栏的col也会变成100%宽度，自然就被挤到内容区的下方了。

解决方案1：小屏幕保持侧边栏与内容区并排 #

如果你希望小屏幕下两者依然横向排列，需要给内容区和侧边栏添加无断点的网格类，让它们在所有屏幕尺寸下都分配固定列数：

<div class="row">
  <!-- 所有屏幕占9列，sm及以上保持9列 -->
  <div class="col-9 col-sm-9">
    <div class="bg-light p-3 mt-4">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusantium alias aperiam cumque delectus earum, eligendi eos eveniet excepturi, exercitationem harum iste itaque iure laborum molestias mollitia, neque nesciunt nihil nostrum numquam perspiciatis qui sed sequi voluptatibus. Aliquid blanditiis, commodi corporis culpa delectus dignissimos, doloribus enim inventore nobis numquam omnis tempora ullam vel. Architecto doloribus dolorum ex fugiat impedit qui veritatis. Dolorum, in ipsum nisi quas similique sint tempore. Ab accusamus asperiores consequuntur culpa cupiditate debitis deserunt dolore doloribus dolorum eius enim eos error esse impedit ipsa iusto labore laboriosam magni maxime, minima modi natus perspiciatis placeat quibusdam quo quos rerum saepe sunt ullam veritatis? Adipisci autem cumque debitis dignissimos dolorum eaque est eum, expedita facere fuga in iusto minima numquam odio, odit officiis perferendis, placeat quia quisquam ratione ullam unde ut. Accusamus atque dignissimos doloremque harum modi neque repudiandae sed? A ab aliquid, animi aut consequuntur dicta dolores ducimus eos, exercitationem ipsam iusto magnam minima neque nesciunt obcaecati odio officia saepe temporibus unde voluptatem. Aliquam assumenda aut blanditiis consectetur cupiditate delectus earum eveniet facilis id ipsa ipsam, iure non quae quas quia, quo repellat reprehenderit tenetur, velit vitae! Atque beatae corporis ipsum nemo, rem reprehenderit unde vitae voluptatum.</p>
    </div>
    <div class="bg-light p-3 mt-4">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusantium alias aperiam cumque delectus earum, eligendi eos eveniet excepturi, exercitationem harum iste itaque iure laborum molestias mollitia, neque nesciunt nihil nostrum numquam perspiciatis qui sed sequi voluptatibus. Aliquid blanditiis, commodi corporis culpa delectus dignissimos, doloribus enim inventore nobis numquam omnis tempora ullam vel. Architecto doloribus dolorum ex fugiat impedit qui veritatis. Dolorum, in ipsum nisi quas similique sint tempore. Ab accusamus asperiores consequuntur culpa cupiditate debitis deserunt dolore doloribus dolorum eius enim eos error esse impedit ipsa iusto labore laboriosam magni maxime, minima modi natus perspiciatis placeat quibusdam quo quos rerum saepe sunt ullam veritatis? Adipisci autem cumque debitis dignissimos dolorum eaque est eum, expedita facere fuga in iusto minima numquam odio, odit officiis perferendis, placeat quia quisquam ratione ullam unde ut. Accusamus atque dignissimos doloremque harum modi neque repudiandae sed? A ab aliquid, animi aut consequuntur dicta dolores ducimus eos, exercitationem ipsam iusto magnam minima neque nesciunt obcaecati odio officia saepe temporibus unde voluptatem. Aliquam assumenda aut blanditiis consectetur cupiditate delectus earum eveniet facilis id ipsa ipsam, iure non quae quas quia, quo repellat reprehenderit tenetur, velit vitae! Atque beatae corporis ipsum nemo, rem reprehenderit unde vitae voluptatum.</p>
    </div>
  </div>
  <!-- 所有屏幕占3列，sm及以上保持3列 -->
  <div class="col-3 col-sm-3">
    <div class="bg-light p-3 mt-4">
      <h2>Head</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, sed</p>
    </div>
    <div class="bg-light p-3 mt-4">
      <h2>Head</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, sed</p>
    </div>
  </div>
</div>

⚠️ 注意：小屏幕上3列的宽度会比较窄，侧边栏内容可能显示拥挤，这种方案更适合侧边栏内容较少的场景。

解决方案2：小屏幕侧边栏移至内容区上方（更友好的移动端体验） #

如果不想让侧边栏在小屏幕下移到底部，反而希望它显示在内容区前面（符合移动端用户从上到下的阅读逻辑），可以调整HTML顺序，再用Bootstrap的响应式排序类：

<div class="row">
  <!-- 先写侧边栏，sm及以上屏幕将它排到行的最后（右侧） -->
  <div class="col-sm-3 order-sm-last col-12">
    <div class="bg-light p-3 mt-4">
      <h2>Head</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, sed</p>
    </div>
    <div class="bg-light p-3 mt-4">
      <h2>Head</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, sed</p>
    </div>
  </div>
  <!-- 内容区：sm及以上占9列，小屏幕占满整行 -->
  <div class="col-sm-9 col-12">
    <div class="bg-light p-3 mt-4">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusantium alias aperiam cumque delectus earum, eligendi eos eveniet excepturi, exercitationem harum iste itaque iure laborum molestias mollitia, neque nesciunt nihil nostrum numquam perspiciatis qui sed sequi voluptatibus. Aliquid blanditiis, commodi corporis culpa delectus dignissimos, doloribus enim inventore nobis numquam omnis tempora ullam vel. Architecto doloribus dolorum ex fugiat impedit qui veritatis. Dolorum, in ipsum nisi quas similique sint tempore. Ab accusamus asperiores consequuntur culpa cupiditate debitis deserunt dolore doloribus dolorum eius enim eos error esse impedit ipsa iusto labore laboriosam magni maxime, minima modi natus perspiciatis placeat quibusdam quo quos rerum saepe sunt ullam veritatis? Adipisci autem cumque debitis dignissimos dolorum eaque est eum, expedita facere fuga in iusto minima numquam odio, odit officiis perferendis, placeat quia quisquam ratione ullam unde ut. Accusamus atque dignissimos doloremque harum modi neque repudiandae sed? A ab aliquid, animi aut consequuntur dicta dolores ducimus eos, exercitationem ipsam iusto magnam minima neque nesciunt obcaecati odio officia saepe temporibus unde voluptatem. Aliquam assumenda aut blanditiis consectetur cupiditate delectus earum eveniet facilis id ipsa ipsam, iure non quae quas quia, quo repellat reprehenderit tenetur, velit vitae! Atque beatae corporis ipsum nemo, rem reprehenderit unde vitae voluptatum.</p>
    </div>
    <div class="bg-light p-3 mt-4">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusantium alias aperiam cumque delectus earum, eligendi eos eveniet excepturi, exercitationem harum iste itaque iure laborum molestias mollitia, neque nesciunt nihil nostrum numquam perspiciatis qui sed sequi voluptatibus. Aliquid blanditiis, commodi corporis culpa delectus dignissimos, doloribus enim inventore nobis numquam omnis tempora ullam vel. Architecto doloribus dolorum ex fugiat impedit qui veritatis. Dolorum, in ipsum nisi quas similique sint tempore. Ab accusamus asperiores consequuntur culpa cupiditate debitis deserunt dolore doloribus dolorum eius enim eos error esse impedit ipsa iusto labore laboriosam magni maxime, minima modi natus perspiciatis placeat quibusdam quo quos rerum saepe sunt ullam veritatis? Adipisci autem cumque debitis dignissimos dolorum eaque est eum, expedita facere fuga in iusto minima numquam odio, odit officiis perferendis, placeat quia quisquam ratione ullam unde ut. Accusamus atque dignissimos doloremque harum modi neque repudiandae sed? A ab aliquid, animi aut consequuntur dicta dolores ducimus eos, exercitationem ipsam iusto magnam minima neque nesciunt obcaecati odio officia saepe temporibus unde voluptatem. Aliquam assumenda aut blanditiis consectetur cupiditate delectus earum eveniet facilis id ipsa ipsam, iure non quae quas quia, quo repellat reprehenderit tenetur, velit vitae! Atque beatae corporis ipsum nemo, rem reprehenderit unde vitae voluptatum.</p>
    </div>
  </div>
</div>

这里的order-sm-last类会在屏幕≥sm断点时，把侧边栏放到行的末尾（也就是右侧），而小屏幕下因为col-12，侧边栏会先占满整行显示，然后是内容区，体验会更自然。

解决方案3：小屏幕侧边栏依然在下方但优化布局 #

如果接受小屏幕侧边栏在下方，但想让布局更合理，可以给内容区和侧边栏都加上col-12，确保小屏幕下都占满整行，同时保持大屏的并排效果：

<div class="row">
  <div class="col-sm-9 col-12">
    <!-- 内容区代码 -->
  </div>
  <div class="col-sm-3 col-12">
    <!-- 侧边栏代码 -->
  </div>
</div>

这种方案是最符合Bootstrap移动端优先设计理念的，避免小屏幕上内容拥挤的问题。

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