Comment ajouter des boutons de médias sociaux à bootstrap nav

Question

J'essaie d'ajouter des boutons Twitter, Google+ et Facebook à un en-tête de navigation afin qu'ils apparaissent sur la droite du coin supérieur droit de l'en-tête, sur une ligne au-dessus du menu nav .

J'utilise Bootstrap.

I Tred la forllowing:

1) Classe de rangée 2) table avec deux rangées 3) un autre ul

non travaillé de ceux-ci. Veuillez trouver ci-dessous le code sans les liens de boutons sociaux.

HTML:

<div class="nav"> 
    <div class="container"> 
    <span class="pull-left"> 
     <a href="home.html"> 
      <img src="images/logo150.png" width="150"> 
     </a> 
    </span> 
    <ul class="pull-right"> 
     <li><a class="active" href="home.html">Get Muse</a></li> 
     <li><a href="page1.html">Page1</a></li> 
     <li><a href="page2.html">Page2</a></li> 
     <li><a href="page3.html">Page3</a></li> 
    </ul> 
    </div> 
</div> 

CSS:

.nav .pull-right { 
    padding-top: 40px; 
} 

.nav { 
    border-bottom: 1px solid #dbdbdb; 
} 

.nav a { 
    color: #5a5a5a; 
    font-size: 14px; 
    padding: 14px 10px; 
    text-transform: uppercase; 
} 

.nav li { 
    display: inline; 
} 

Answer 1

Si vous utilisez Bootstrap, je vous suggère de coller à Bootstrap des classes, autant que possible, et de faire la grille de votre nouveau BFF. Apprendre les ins et hors de la grille vous fera économiser des heures et des heures de personnalisation. Dans cet esprit, je pense que vous devriez empiler vos deux lignes d'éléments nav (liens sociaux et liens de nav) dans une classe de grille tirée à droite (j'ai choisi col-xs-8 de façon quelque peu arbitraire dans mon exemple).

Puis utilisez http://fontawesome.io pour vos icônes sociales.

<div class="col-xs-8 pull-right text-right"> 
<ul> 
    <li><a href="#"><i class="fa fa-stack-overflow"></i></a></li> 
    <li><a href="#"><i class="fa fa-twitter"></i></a></li> 
    <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
    <li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
</ul> 
<ul class="pad-top"> 
    <li><a class="active" href="home.html">Get Muse</a></li> 
    <li><a href="page1.html">Page1</a></li> 
    <li><a href="page2.html">Page2</a></li> 
    <li><a href="page3.html">Page3</a></li> 
</ul> 

je devais deviner à certains de vos besoins (style de bouton, la hauteur de votre logo img), mais cet exemple devrait vous mettre sur la bonne voie: http://www.bootply.com/27qTRDLOKw