Html 如何在引导模式中均匀分布社交媒体图标

如何使图标均匀分布在模态的宽度上？

我在一个模型中放置了几个社交媒体图标。它们目前重叠，这并不能带来良好的体验，请参见下面的图像和代码示例：

HTML代码：

.fa{
填充：12px；
字号：18px；
宽度：30px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
保证金：5px2px；
}
.fa:悬停{
不透明度：0.7；
}
.fa信封{
背景#939393；
颜色：白色；
}
.fa推特{
背景：#55ACEE；
颜色：白色；
}
领英广场{
背景：#007bb5；
颜色：白色；
}
.fa github{
背景：#2c4762；
颜色：白色；
}
.fa堆栈交换{
背景#125688；
颜色：白色；
}

&时代；
给我打个电话。。


接近

给出模态车身显示flexbox：

.modal-body{
    display:flex;
    align-items: space-between;
    flex-direction:row;
}

---

Flexbox可能会处理它

给模态车身显示Flexbox：

.modal-body{
    display:flex;
    align-items: space-between;
    flex-direction:row;
}

---

Flexbox可能会处理它

我看不见森林，看不见树木Rubenxfd在评论中指出，

.fa

设置为固定宽度（

宽度：30px；

）。将此更改为

width:auto修复了所有问题。
我看不见森林Rubenxfd在评论中指出，
.fa
设置为固定宽度（
宽度：30px；
）。将此更改为
width:auto修复了所有问题。

a
{
宽度：30px；
高度：30px；
填充顶部：8px；
}
.fa信封{
背景#939393；
颜色：白色；
}
.fa推特{
背景：#55ACEE；
颜色：白色；
}
领英广场{
背景：#007bb5；
颜色：白色；
}
.fa github{
背景：#2c4762；
颜色：白色；
}
.fa堆栈交换{
背景#125688；
颜色：白色；
}

&时代；
给我打个电话。。


接近
打开模式
a
{
宽度：30px；
高度：30px；
填充顶部：8px；
}
.fa信封{
背景#939393；
颜色：白色；
}
.fa推特{
背景：#55ACEE；
颜色：白色；
}
领英广场{
背景：#007bb5；
颜色：白色；
}
.fa github{
背景：#2c4762；
颜色：白色；
}
.fa堆栈交换{
背景#125688；
颜色：白色；
}

&时代；
给我打个电话。。


接近
打开Modal
当我的评论解决了问题时，我会将其列为答案

这是因为您为
.fa
类指定了固定宽度

这可以通过将其更改为
width:auto

当我的评论解决了问题时，我将把它列为答案

这是因为您为
.fa
类指定了固定宽度

这可以通过将其更改为
width:auto

Try.fa{margin left:0；margin right:5px；text align:center；font size:12px；padding:16px；width:auto}.fa:last child{margin right:0}也许这是因为您给了.fa一个固定的宽度。也许可以尝试使用
width:auto将起作用。太棒了。尽管有很多树，我还是看不见森林。谢谢@Rubenxfd！试试.fa{margin left:0；margin right:5px；text align:center；font size:12px；padding:16px；width:auto}。fa:last child{margin right:0}也许这是因为您给了.fa一个固定的宽度。也许可以尝试使用
width:auto将起作用。太棒了。尽管有很多树，我还是看不见森林。谢谢@Rubenxfd！