Symbole passen nicht in die Breite von Bootstrap navbar

Ich versuche, eine Navbar in Bootstrap, die Symbole auf der rechten Seite der Navigationsleiste enthält. Mit diesem Code werden die Symbole außerhalb der Breite der Navigationsleiste angezeigt. Wie kann ich die Symbole richtig formatieren, aber nur so breit wie die Navigationsleiste?Symbole passen nicht in die Breite von Bootstrap navbar

<body> 
    <div class="container"> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">ABOUT</a></li> 
      <li><a href="#">PORTFOLIO</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right social"> 
     <li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li> 
     <li><a href="#"><i class="fa fa-github-square fa-lg"></i></a></li> 
     <li><a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a></li> 
    </nav> 
    </div>

Quelle

2016-04-06 victoria

Ich würde nur eine CSS wie folgt erstellen und fügen Sie ihn in den Container div

.nopadding { 
 
    padding: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="container nopadding"> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">ABOUT</a></li> 
 
      <li><a href="#">PORTFOLIO</a></li> 
 
      <li><a href="#">CONTACT</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right social"> 
 
     <li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-github-square fa-lg"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a></li> 
 
     </ul></div> 
 
    </nav> 
 
    </div>

Quelle

2016-04-06 10:56:32 Sphinx

Hier ist ein Working Fiddle

die Klasse container im div entfernen, die im Inneren des nav Element ist

auch ein margin-right:0px; auf Ihre zweite ul gesetzt, die die Symbole enthält.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class=""> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">ABOUT</a></li> 
 
     <li><a href="#">PORTFOLIO</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right social" style="margin-right:0px;"> 
 
     <li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-github-square fa-lg"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-google-plus-square fa-lg"></i></a></li> 
 
    </nav> 
 
    </div>

Sehen Sie das obige Snippet in Vollseitenmodus die Änderungen sehen

Quelle

2016-04-06 10:51:39

Symbole passen nicht in die Breite von Bootstrap navbar

Antwort

Verwandte Themen