Bootstrap navbar genişliğine sığmayan simgeler

Bootstrap'te navbarın sağ tarafındaki simgeleri içeren bir navbar yapmaya çalışıyorum. Bu kod ile simgeler navbarın genişliğinin dışına dökülür. Simgelerin doğru şekilde hizalanacağı şekilde nasıl biçimlendirilebilirim, ancak sadece nav çubuğundaki kadar geniş mi? İşteBootstrap navbar genişliğine sığmayan simgeler

<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>

kaynak

2016-04-06 victoria

değişiklikleri görmek ve konteyner div

eklemek için Tam Sayfa Modu yukarıdaki pasajı

.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>

kaynak

2016-04-06 10:56:32 Sphinx

da ayarlanmış bir Working Fiddle

nav eleman

içindedir div class container kaldırmak olan bir margin-right:0px; için senin simgeleri tutan ikinci ul.

Görünüm

<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>

şöyle Sadece css yaratacak

kaynak

2016-04-06 10:51:39

Bootstrap navbar genişliğine sığmayan simgeler

cevap

İlgili konular