Twitter bootstrap Bootstrap4折叠组件内图标出现意外行为-无法水平显示图标

我试图在Bootstrap4折叠卡中水平显示3个图标。我在卡片上添加了我标记的图标，但它们是垂直显示的。由于某种原因，i元素占据了整条线。下面是一个JSFIDLE示例：

我尝试更改css属性，包括：

display: inline; 
width: 20px

---

我还尝试将父div更改为display:flex。所有这些都没有帮助。对我如何实现这一目标有什么建议吗

您需要覆盖要阻止的卡的显示

.card{
  display: block;
}

或

---

默认情况下，引导4卡体为flex direction:列。您可以使用flex row类将其更改为flex direction:row

---

另请注意，全局更改.col填充为10px将对网格对齐产生不利影响。

谢谢！至于.col{padding:10px}，这个css保留在JSFIDLE引导模板中。

<div class="card card-body d-block">
  <i class="fa fa-facebook-f"></i>
  <i class="fa fa-whatsapp"></i>
  <i class="fa fa-envelope"></i>
</div>

<div class="card card-body flex-row">
    <i class="fa fa-facebook-f"></i>
    <i class="fa fa-whatsapp"></i>
    <i class="fa fa-envelope"></i>
</div>

<div class="card card-body d-block">
    <i class="fa fa-facebook-f"></i>
    <i class="fa fa-whatsapp"></i>
    <i class="fa fa-envelope"></i>
</div>