Twitter中的導航欄圖標位置Bootstarp 3

當前正在爲一個項目的頁面工作，並且我的代碼是在調整移動屏幕時摺疊導航欄。一切工作的方式，我唯一的問題是圖標欄的位置。通常情況下，圖標欄在摺疊時位於頁面的右上角，但是可以將它放在左側。我搜索了四周，我可以找到很多有關更改圖標圖像，導航欄在哪一點崩潰等信息，但沒有將它移動到屏幕的另一側。Twitter中的導航欄圖標位置Bootstarp 3

這只是一個具有摺疊功能的基本導航欄代碼，但我需要左側不是右側的圖標。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 


    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet"> 
    <link type="text/css" href="css/style.css" rel="stylesheet"> 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
    </head> 

    <body> 

    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">Practice</a> 
      </div> 

      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a href="feature.html">Feature</a></li> 
        <li class="dropdown"> 
        <a href="tutorials" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Bootstrap Tutorials</a></li> 
         <li><a href="#">PHP Tutorials</a></li> 
         <li><a href="#">Java Tutorials</a></li> 
         <li><a href="#">CSS Tutorials</a></li> 
        </ul> 
        </li> 
        <li><a href="contact.html">Contact</a></li> 
       </ul> 
      </div> 

     </div> 
    </div>

來源

2014-02-13 Alfox1987

一定要編輯的問題，包括你正在使用的代碼。 –

只是CSS的一點點做魔術：

.navbar-toggle { 
    float: left; 
    margin-left: 15px; 
}

Example

來源

2014-02-13 22:46:42 Morpheus

Twitter中的導航欄圖標位置Bootstarp 3

回答

相關問題