在媒體查詢中導航欄中的Fa-icon分佈

當屏幕最大寬度爲414時，我正在尋找將fa-icons均勻分佈在屏幕全寬的最佳方式，並且因爲當我使用隱藏XS其隱藏，直到700pt，我想正好在414隱藏它，並有發圖標在媒體查詢中導航欄中的Fa-icon分佈

tab-icon { 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
    margin-right: 150px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
    padding-right: 15px; 
 
} 
 
.tab-icon li { 
 
    margin-left: 2.5vw; 
 
    margin-right: 2.5vw; 
 
    
 
} 
 
.tab-icon li a{ 
 
    color: #000; 
 
    margin-top: 50%; 
 
    
 
    @media screen and (max-width: 414px) { 
 
    .tab-icon li { 
 
     margin-left: 7.5vw; 
 
     margin-right: 7.5vh; 
 
    
 
} 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="navbar-header page-scroll"> 
 
       <ul class="tab-icon pull-right list-inline hidden-lg"> 
 
         <li><a class="fa fa-home fa-2x " href="#home"></a></li> 
 
         <li><a class="fa fa-handshake-o fa-2x" href="#service"></a></li>   
 
         <li><a class="fa fa-download fa-2x" href="#download"></a></li> 
 
         <li><a class="fa fa-car fa-2x" href="#chauffers"></a></li> 
 
       </ul> 
 
       
 
       <a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a> 
 
      </div>

來源

2016-12-16 LeLouch

均勻分佈，聽起來像是你要使用的Flexbox的這一點。它是爲了影響您的物品在箱子中的傳播而創建的：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/ –

瞧之間甚至空間，你可以做這樣的Flexbox的。唯一的缺點是你不能使用Favicon圖標，你必須使用圖像，因爲圖像拉伸，而字體不能。

.tab-icon { 
 
    display: flex; 
 
    align-items: stretch; 
 
    
 
    flex-flow: row nowrap; 
 
    width: 500px; 
 
    list-style: none; 
 
    
 
} 
 

 
.tab-icon li { 
 
    flex-grow: 1; 
 
    } 
 

 
.tab-icon li img{ 
 
    width: 100%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="navbar-header page-scroll"> 
 
       <ul class="tab-icon pull-right list-inline hidden-lg"> 
 
         <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li> 
 
         <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>  
 
         <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li> 
 
         <li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li> 
 
       </ul> 
 
       
 
       <a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a> 
 
      </div>

來源

2016-12-16 11:15:33

在媒體查詢中導航欄中的Fa-icon分佈

回答

相關問題