Hinzufügen eines Telefons und eines Kartensymbols links neben dem bootstrap hamburger icon

Question

Ich habe eine grundlegende bootstrap v3-Website. Wenn die Navigationsleiste auf kleineren Bildschirmen zum Hamburger-Symbol wechselt, möchte ich ein Telefonsymbol (Verknüpfung mit einer Telefonnummer) und ein Kartensymbol (Verknüpfung zu Google Maps) hinzufügen, damit mobile Benutzer einfach darauf zugreifen können. Ich habe versucht, ein Telefonsymbol auf der linken Seite des Hamburgers hinzuzufügen, indem ich den Code direkt vor der .navbar-Umschalttaste hinzufügte, aber ich kann nicht herausfinden, wie ich darauf reagieren kann, wie beim Hamburger-Icon. Ich kann es positionieren, aber das hält es nicht ansprechend.

Hier ist mein aktueller Code. Ich habe versucht, es mit nur dem Telefonsymbol funktionieren zu lassen, aber ich möchte auch, dass ein Kartensymbol daneben positioniert wird. Das meiste Styling wurde von der Klasse .nav-bar-toggle in der Datei bootstrap.min.css kopiert.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar i { 
 
    font-size: 200%; 
 
    position: relative; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a href="#"><img src="img/autohaus-logo.png" class="navbar-brand"></a> 
 
     <a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a> 
 
     <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">      
 
     <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> 
 
</nav>

Answer 1

Wie uncollapsible Symbole der Bootstrap Navbar

wir verwenden, um die Default navbar von der Bootstrap-Dokumentation hinzuzufügen.

1. Fügen Sie die <ul class="nav navbar-nav"><li></li></ul> Struktur am Ende des <div class="navbar-header"> Blocks hinzu. Diese Struktur wird nicht auf einem schmalen Bildschirm ausgeblendet.
2. Fügen Sie the visible-xs class zu dem Tag <ul> hinzu. Dann wird es nur auf einem schmalen Bildschirm sichtbar sein.
3. Fügen Sie Symbole als Elemente dieser Struktur hinzu.
4. Fügen Sie the pull-right class zu jedem <li> Tag hinzu. Diese Gegenstände werden in der Nähe des Umschaltknopfes platziert.

Bitte überprüfen Sie das Ergebnis. Wollen Sie das erreichen?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
     <ul class="nav navbar-nav visible-xs"> 
 
     <li class="pull-right"><a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a></li> 
 
     <li class="pull-right"><a href="#"><i class="glyphicon glyphicon-map-marker"></i></a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>