时间戳

首页 > 解决方案 > Bootstrap4 折叠组件中图标的意外行为 - 无法水平显示图标

twitter-bootstrap - Bootstrap4 折叠组件中图标的意外行为 - 无法水平显示图标

问题描述

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

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

display: inline; 
width: 20px

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

标签： twitter-bootstrapbootstrap-4font-awesome

解决方案

默认情况下，Bootstrap 4card-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 将对网格对齐产生不利影响。

推荐阅读