Bootstrap 5中justify-content无法为图片添加间距问题

首先你犯了个基础错误：当前flex容器用的是justify-content-end，这会把所有子元素靠右对齐，自然挤在一起。要实现间距，得先把这个类换成justify-content-around或者justify-content-between。

另外，img-fluid本身不会导致justify-content失效，但如果图片（或它的父div）宽度太宽，撑满了整个flex容器的可用空间，justify-content就没多余空间分配间距了。解决办法是限制每个图片容器的宽度，给它们加固定宽度类或者百分比宽度类。

修正后的代码示例 #

方案1：使用Bootstrap网格类限制宽度 #

给每个图片的父div加上col-3（或者其他合适的宽度类，比如col-4），同时替换justify-content类：

<div class="container">
  <div class="d-flex flex-row justify-content-between my-5">
    <div class="border border-2 px-2 col-3">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
    <div class="border border-2 px-2 col-3">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
    <div class="border border-2 px-2 col-3">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
  </div>
</div>

方案2：自定义图片容器宽度 #

如果不想用网格类，也可以给父div加w-25（占容器25%宽度）：

<div class="container">
  <div class="d-flex flex-row justify-content-around my-5">
    <div class="border border-2 px-2 w-25">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
    <div class="border border-2 px-2 w-25">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
    <div class="border border-2 px-2 w-25">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
  </div>
</div>

补充说明 #

• justify-content-between会让子元素两端对齐，中间间距相等；justify-content-around会让每个子元素左右的间距相等，容器两端也会留有间距。
• 注意px-4是给图片加的内边距，会占用容器宽度，调整样式时要考虑这个因素。

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