如何用Bootstrap网格布局实现类似flexbox的justify-content:space-around效果？

首先要明确：Bootstrap的.row本身就是flex容器，所以别给外层容器加样式，要把对齐类直接加在.row上。

要在宽度≤768px的屏幕上实现类似justify-content:space-around的效果，给包含cards的.row加这两个类就行：

• .justify-content-around：默认在所有屏幕下生效，实现space-around的均匀分布效果
• 如果大屏幕（≥768px）不需要这个对齐方式，再加.justify-content-md-start（或者你需要的其他对齐类，比如center）来覆盖大屏下的样式

另外要注意：cards必须设置非100%的宽度类，比如小屏幕下用.col-10（Bootstrap 5里xs断点可省略），确保卡片不占满整行——不然没有多余空间，space-around的效果根本看不出来。

给你个简单的代码示例参考：

<div class="container">
  <div class="row justify-content-around justify-content-md-start">
    <div class="card col-10 col-md-3">
      <!-- 卡片内容 -->
    </div>
    <div class="card col-10 col-md-3">
      <!-- 卡片内容 -->
    </div>
    <div class="card col-10 col-md-3">
      <!-- 卡片内容 -->
    </div>
  </div>
</div>

这个例子里，小屏幕（≤768px）下卡片是col-10宽度，row用justify-content-around让卡片左右均匀分布；大屏幕（≥768px）下卡片是col-md-3，row自动切换为左对齐。

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