html - 如何在 Bootstrap 模式中均匀分布社交媒体图标

Question

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

我在模式中放置了几个社交媒体图标。它们目前重叠，这不会带来很好的体验，请参见下面的图片和代码示例:

HTML代码:

.fa {
      padding: 12px;
      font-size: 18px;
      width: 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 5px 2px;
    }

    .fa:hover {
      opacity: 0.7;
    }

    .fa-envelope {
      background: #939393;
      color: white;
    }

    .fa-twitter {
      background: #55ACEE;
      color: white;
    }

    .fa-linkedin-square {
      background: #007bb5;
      color: white;
    }

    .fa-github {
      background: #2c4762;
      color: white;
    }

    .fa-stack-exchange {
      background: #125688;
      color: white;
    }

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Give me a shout via..</h4>
      </div>
      <div class="modal-body">
        <p>
          <a href="#" class="fa fa-envelope"></a>
          <a href="#" class="fa fa-twitter"></a>
          <a href="#" class="fa fa-linkedin-square"></a>
          <a href="#" class="fa fa-stack-exchange"></a>
          <a href="#" class="fa fa-github"></a>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

由于我的评论解决了问题，我将其列为答案。

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

这可以通过将其更改为 width: auto; 来解决

fiddle