ブートストラップモードでソーシャルメディアアイコンを均等に配布する方法

Question

アイコンをモーダルの幅全体に均等に分散させるにはどうすればよいですか？

私はいくつかのソーシャルメディアアイコンをモーダルに入れました。モーダル・ボディの表示を与える

.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

Answer 2

：彼らは現在、すてきな経験のために作るない重なっ下の画像とコードサンプルを参照してください。

をHTMLコードフレックスボックス：

フレックスボックスはおそらくそれを処理します

Answer 3

私は木の森を見ることができませんでした。 Rubenxfdは、.faが固定幅（width: 30px;）に設定されているというコメントに指摘しています。これをwidth: auto;に変更するとすべてが修正されました。

Answer 4

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>