如何將我的社交媒體圖標拉到我的導航欄右側？

Question

我正在使用bootstrap，以下是我的導航欄的代碼。我添加了令人敬畏的字體圖標，但我希望將它拉到右側。如果沒有將家庭，關於和聯繫方式丟掉，我似乎無法將其拉向右邊。任何想法？

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i> 
     <li><a href="#"><i class="fa fa-twitter fa-lg"></i> 
     <li><a href="#"><i class="fa fa-pinterest fa-lg"></i> 
      </ul> 
     </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

Answer 1

有幾件事情錯的標記。從navbar-header中獲取navbar-collapse。在<li>內正確關閉<a href>標記。使用navbar-right將圖標拖到右側。

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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 id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a></li> 
       <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li> 
       <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

工作演示：http://codeply.com/go/zb1PvhcJHs

Answer 2

爲什麼不這樣做呢？製作一個新的導航欄。

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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 id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li>  
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a></li> 
     <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li> 
     <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

Demo