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

Question

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

我有几个社交媒体图标放在一个模态中。它们目前重叠，不能带来愉快的体验，请参阅下面的图像和代码示例：

HTML code：

.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

我无法看到树林。 Rubenxfd 在.fa设置为固定宽度（width: 30px;）的评论中指出。将此更改为width: auto;修复了所有内容。

Answer 2

a
{
  width: 30px;
  height: 30px;
  padding-top: 8px;
}
.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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 text-center">
            <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>
    
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

Answer 3

当我的评论解决了问题时，我会将其列为答案。

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

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

来解决

fiddle

Answer 4

给模态体显示flexbox：

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

Flexbox可能会处理它