Bootstrap div水平对齐问题求助：justify-content-between不生效

嘿，刚学Bootstrap遇到这种小问题太正常啦！我当初也卡过这里😅

咱们先聊聊为啥justify-content-between没效果：你用的col-md-4在中等屏幕（≥768px）时，每个列会占满12栅格系统里的4份，三个加起来刚好12份，把整个row的宽度填满了——没有多余的空白空间，justify-content-between自然没法发挥作用（它是用来分配剩余空间的）。

给你两个实用的解决方案：

方案1：缩小列宽度，留出空间让justify-content-between生效 #

把列的宽度改成col-md-3（三个列加起来占9份，剩下3份空白），这样justify-content-between就会把空白均匀分配到列的两侧和中间，实现你要的均匀分布效果：

<div class="container">
  <div class="row justify-content-between">
    <div class="col-12 col-sm-12 col-md-3 col-lg-3">
      <div class="first"></div>
    </div>
    <div class="col-12 col-sm-12 col-md-3 col-lg-3">
      <div class="second"></div>
    </div>
    <div class="col-12 col-sm-12 col-md-3 col-lg-3">
      <div class="third"></div>
    </div>
  </div>
</div>

方案2：使用Bootstrap的Gutter类添加列间距（更推荐） #

如果你想保持每个列占col-md-4的宽度，同时让它们之间有均匀的间距，可以用Bootstrap内置的g-*类给row添加 gutter（间距），这样不用调整列宽就能实现均匀分布的视觉效果：

<div class="container">
  <div class="row g-4"> <!-- g-4表示间距大小，可选g-1到g-5 -->
    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
      <div class="first"></div>
    </div>
    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
      <div class="second"></div>
    </div>
    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
      <div class="third"></div>
    </div>
  </div>
</div>

另外还要注意：确保你的.first、.second、.third这些自定义div设置了width: 100%（或者直接继承列的宽度），不然可能会出现列宽生效但内部元素没占满的情况哦！

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