如何在Bootstrap模式下均勻分佈社交媒體圖標

如何讓圖標均勻分佈在模態的寬度上？如何在Bootstrap模式下均勻分佈社交媒體圖標

我有一對社交媒體圖標放在一個模式。目前，他們重疊，這不會使一個很好的經驗，見下圖和代碼示例：

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>

來源

2017-07-19 Johnny

嘗試.fa {保證金左：0;保證金右：5px的;文本對齊：中心;字體大小：12像素; padding：16px; width：auto} .fa：last-child {margin-right：0} – Super

也許這是因爲你給.fa一個固定的寬度。也許嘗試使用'width：auto;'將會起作用。 – Rubenxfd

輝煌。我看不到所有樹木的森林。感謝@Rubenxfd！ – Johnny

至於我的意見解決了這個問題，我將列出它作爲一個答案。

這是因爲你給了.fa類固定的寬度。

這可以通過改變此被求解以width: auto;

fiddle

來源

2017-07-19 10:00:59 Rubenxfd

給模體顯示器flexbox：

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

Flexbox可能會處理它

來源

2017-07-19 09:03:06 StarGrass

我看不到樹林。 Rubenxfd在評論中指出.fa被設置爲固定寬度（width: 30px;）。更改爲width: auto;修復了一切。

來源

2017-07-19 09:12:22 Johnny

沒問題，很高興它解決了！ – Rubenxfd

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>

來源

2017-07-19 09:23:57

如何在Bootstrap模式下均勻分佈社交媒體圖標

回答

相關問題