Collapse Menü, haben alle Social Media Icons in einer Zeile

Question

Ich bin ein Bootstrap n00b. Also auf meiner persönlichen Website habe ich eine Navigationsleiste, die zusammenbricht, wenn sich die Bildschirmbreite ändert. Alles funktioniert gut, wie hier gezeigt:

aber ich möchte, wenn alle meine Social-Media-Symbole auf einer Linie waren. Ich habe schon mehrere Dinge ausprobiert, aber ich hatte kein Glück.

Hier ist mein html:

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-  toggle="collapse" data-target="#navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="./index" title="Bio">Bio</a></li> 
     <li><a href="./Resume" title="My Resume">Resume</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="https://www.linkedin.com/in/cody-reandeau-831038115" class="entypo-linkedin" target="_blank" title="Linkedin"></a></li> 
     <li><a href="https://github.com/codyreandeau" class="entypo-github" target="_blank" title="Github"></a></li> 
     <li><a href="https://www.freecodecamp.com/codyreandeau" class="fontawesome-fire" target="_blank" title="Free Code Camp"></a></li> 
     <li><a href="https://www.hackerrank.com/codyareandeau" class="fontawesome-sitemap" target="_blank" title="Hacker Rank"></a></li> 
     <li><a href="https://www.codecademy.com/scriptSurfer86103" class="zocial-html5" target="_blank" title="Codecademy"></a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Ich denke, es ist etwas was ich brauche ist in CSS zu tun?

.navbar-collapse { 
    display:inline; 
} 

^Ich habe das versucht, aber es funktioniert nicht; Ich kann mir vorstellen, dass es etwas komplizierter ist als nur das. Jede Hilfe wäre großartig!

Answer 1

Versuchen Sie es mit inline-block statt inline nutzen könnten.

.navbar-right li { 
    display: inline-block; 
} 

Answer 2

versuchen diese

.nav>li{ 
    display: inline-block; 
    } 

Answer 3

Sie müssen sich die <li> Elemente zielen. Haben Sie versucht, so etwas wie:

ul.nav li { 
    display: inline; 
} 

Sie auch display: inline-block

Answer 4

Versuchen

.nav> li { position: relative; Anzeige: Inline; Schwimmer: links; }