Question

我试图在Bootstrap4折叠卡内水平显示3个图标。我将图标（i标签）添加到卡中，但它们垂直显示。由于某种原因，i元素占据整行。这是一个Jsfiddle示例：https://jsfiddle.net/benCarp/Lz40t409/

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

display: inline; 
width: 20px

我也尝试将父div更改为display: flex。所有这些都没有帮助。有关如何实现这一目标的任何建议？

Answer 1

默认情况下，Bootstrap 4 card-body为flex-direction:column。您可以使用flex-direction:row类...

将其更改为flex-row

https://www.codeply.com/go/52ynXc916o

<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>

或者，您可以制作卡片正文display:block而不是display:flex：

<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>

另外作为旁注，全局将.col填充更改为10px将对网格对齐产生负面影响。

Answer 2

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

.card{
  display: block;
}

或

<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>

Bootstrap4折叠组件内的图标意外行为 - 无法设法水平显示图标

2 个答案: