Fa-Symbol Verteilung in Navbar auf Medienabfrage

Ich bin auf der Suche nach dem besten Weg, um die Fa-Symbole gleichmäßig auf der gesamten Breite des Bildschirms zu verteilen, wenn der Bildschirm maximale Breite 414 ist und verstecken Sie die Navbar-Marke seit wann verwenden versteckten xs seine bis 700pt versteckt, und ich will, es verbergen genau auf 414 und sogar Raum zwischen den Fa-IconsFa-Symbol Verteilung in Navbar auf Medienabfrage

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>

Quelle

2016-12-16 LeLouch

gleichmäßig zu verteilen, klingt wie Sie die Flexbox für diese verwenden möchten. Es wurde erstellt, um die Verbreitung Ihrer Artikel in der Box zu beeinflussen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

Voila, könnten Sie eine Flexbox wie dies tun. Der einzige Nachteil ist, dass Sie keine Favicon-Symbole verwenden können, Sie müssen Bilder verwenden, weil Bilder sich strecken und Schriften nicht.

.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>

Quelle

2016-12-16 11:15:33

Fa-Symbol Verteilung in Navbar auf Medienabfrage

Antwort

Verwandte Themen