アイコンがブートストラップのナビゲータの幅に合わない

ブートストラップにナビバーの右側にアイコンを含む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>

出典

2016-04-06 victoria

変更を確認し、コンテナの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>

出典

2016-04-06 10:56:32 Sphinx

も設定Working Fiddle

がnav要素

内部にあるdiv要素にクラスcontainerを削除しているmargin-right:0px;にあなたのアイコンを保持する第2 ul。

ビュー

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

次のように私はCSSを作成します

出典

2016-04-06 10:51:39

アイコンがブートストラップのナビゲータの幅に合わない

答えて

関連する問題