Verstecke und Verwaltung navbar Elemente auf kleinen Bildschirm

Question

Dies ist, was meine aktuellen navbar wie auf großen Bildschirm aussehen:

Und das ist, wie es auf kleinen Bildschirm sieht (Telefon)

Was ich möchte, ist, machen Sie das U-Logo oben links verschwinden und machen Sie das "in Kontakt kommen" näher mit dem Rest der Elemente (ich verwendet Pull-rechts-Klasse, um in Kontakt zu treten direkt auf groß Bildschirm) und statt der navbar in der Mitte zu sein, möchte ich es horizontal ausbreiten 100% sein, so ist es einfacher, sie meinen Code klicken

Hier ist gerade jetzt:

http://www.bootply.com/G30iN5Ai4u

ich versuchte, die .hidden-xs-Klasse mit dem logo zu verstecken, aber es nicht

Answer 1

Versuchen funktionierte: http://www.bootply.com/sGWCci6pBi

Verwendung Bootstrap-Utility-Klassen:

• sichtbar-xs-Block: sichtbar nur in mobilen Geräten
• sichtbar-sm-Block: sichtbar nur in kleineren Geräten wie 'Tablette'
• sichtbar-MD- Block: sichtbar nur in Medium-Geräten wie 'Desktop'
• sichtbar-lg-Block: sichtbar nur in großen Geräten wie 'Desktop'

Andere Beispiele können fou sein nd: https://github.com/twbs/bootstrap/issues/8883

@eratzlaff sagt:

• Quick Fix oder mögliche Arbeit um.
• versteckt-sm versteckt-md = sichtbarer lg
• versteckt-sm hidden-lg = sichtbarer md
• hidden-md hidden-lg = sichtbar-sm

Code-Beispiel:

<nav class="navbar navbar-transparent"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a> 
      </div> 
       <ul class="nav navbar-nav navbar-firstnav"> 
        <li><a href="#work">work</a></li> 
        <li><a href="#about">about</a></li> 
        <li><a href="#skills">skills</a></li> 
        <li class="visible-xs-block"><a href="#contact">get in touch</a></li> 
        <li class="pull-right visible-lg-block visible-md-block visible-sm-block"><a href="#contact">get in touch</a> 
       </li></ul> 
      </div> 
     </nav> 

Answer 2

Der HTML-Code hat ein nicht geöffnetes Div-Closing-Tag.

Ansonsten ist die Klasse hidden-xs zum navbar-header div angewendet werden muss:

<nav class="navbar navbar-transparent"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header hidden-xs"> 
 
       <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a> 
 
      </div> 
 
      <ul class="nav navbar-nav navbar-firstnav"> 
 
       <li><a href="#work">work</a></li> 
 
       <li><a href="#about">about</a></li> 
 
       <li><a href="#skills">skills</a></li> 
 
       <li class="pull-right"><a href="#contact">get in touch</a> 
 
      </ul> 
 
     </div> 
 
    </nav>