Bootstrap问题：列未凑满12却被换行至新行

嘿，我一眼就看出你大概率踩了个Bootstrap布局的常见小坑！你说每个帖子都被放到新行堆叠，核心问题很可能是每个帖子都被单独包裹在一个row容器里了——这就好比你每放一个东西就新开一张桌子，自然没法在同一排摆开啦。

问题根源拆解 #

Bootstrap的row是一个水平的“容器行”，里面的col-*类元素会在这一行里按12列的规则排布，只有当列的总宽度超过12时才会自动换行。如果你的代码是类似这样的：

<div class="container">
  <!-- 每个帖子单独一个row -->
  <section class="row new-post">
    <div class="col-md-6">帖子内容1</div>
  </section>
  <section class="row new-post">
    <div class="col-md-6">帖子内容2</div>
  </section>
</div>

那每个row里只有一个col-md-6（占6列），剩下的6列是空的，所以每个帖子自然会单独占一行堆叠起来。

正确的布局写法 #

你需要把所有要在同一行排布的帖子，放到同一个row容器里，每个帖子用col-md-6类（这样在中等及以上屏幕一行能放2个帖子，小屏幕会自动堆叠）：

<div class="container">
  <!-- 一个row包裹所有帖子 -->
  <section class="row new-posts">
    <div class="col-md-6 mb-3"> <!-- mb-3是Bootstrap的间距类，避免帖子挤在一起 -->
      <header><h3>帖子标题1</h3></header>
      <p>帖子内容1...</p>
    </div>
    <div class="col-md-6 mb-3">
      <header><h3>帖子标题2</h3></header>
      <p>帖子内容2...</p>
    </div>
    <div class="col-md-6 mb-3">
      <header><h3>帖子标题3</h3></header>
      <p>帖子内容3...</p>
    </div>
    <!-- 更多帖子... -->
  </section>
</div>

其他可能的排查点 #

如果按上面改了还是不行，再检查这两个地方：

• 有没有自定义CSS覆盖了Bootstrap的默认样式？比如给col-md-6加了width: 100%或者display: block，破坏了flex布局（Bootstrap 4+用flex实现列排布）。
• 是不是用了错误的列类？比如不小心写成了col-12（占满整行），而不是col-md-6。

这样调整后，帖子就会在同一行排布，直到填满12列后自动换行了～

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