Bootstrap4折叠组件内图标异常：无法横向显示图标

我明白你遇到的困扰了——在Bootstrap 4的折叠卡片里放三个图标，结果它们总是垂直占满整行，试了display: inline和父容器display: flex都没效果对吧？其实问题大概率是Bootstrap的默认样式和你的元素结构没匹配上，给你两个可行的解决思路：

方法一：用Bootstrap内置的Flex布局类（最推荐） #

Bootstrap本身就提供了完善的flex布局工具类，直接给图标的父容器加上d-flex（默认就是横向排列），再用间距类调整图标之间的距离，就能轻松实现横向排列：

<div class="card-body d-flex">
  <!-- 用mr-3类给每个图标加右边距，最后一个可以不加 -->
  <i class="fas fa-edit mr-3"></i>
  <i class="fas fa-trash mr-3"></i>
  <i class="fas fa-check"></i>
</div>

如果想要图标均匀分布在容器里，还可以加justify-content-around或者justify-content-between类：

<div class="card-body d-flex justify-content-around">
  <i class="fas fa-edit"></i>
  <i class="fas fa-trash"></i>
  <i class="fas fa-check"></i>
</div>

方法二：自定义CSS强制调整样式 #

如果内置类没生效（可能是其他样式冲突），可以给图标单独加自定义类，强制修改它们的显示方式：

1. 先给图标添加自定义类：

<div class="card-body">
  <i class="fas fa-edit custom-icon"></i>
  <i class="fas fa-trash custom-icon"></i>
  <i class="fas fa-check custom-icon"></i>
</div>

2. 然后写CSS：

.custom-icon {
  display: inline-block; /* 让图标并排显示 */
  width: 20px; /* 你需要的宽度 */
  margin-right: 15px; /* 调整图标间距 */
}

为什么之前的尝试没生效？ #

大概率是因为你给父容器加display: flex时，父容器可能继承了Bootstrap的其他块级样式，或者图标被其他样式强制设置为display: block了——用上面的方法就能覆盖这些冲突。

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