引導3摺疊菜單

我剛剛下載了最新版本的自舉... 我建了一個崩潰的資產淨值和它做什麼，它的目的，但是，當你翻轉菜單圖標它縮短了無發生後。在所有的演示中，導航彈出。我下載了的例子，他們不工作後，菜單被隱藏了嗎？我看了全面的解決方案嗎？任何援助將是非常感謝！林包括編寫的代碼..引導3摺疊菜單

CSS

/*nav styles*/ 
.navbar{ 
    background:none; 
} 
.nav{ 
    margin-top:77px; 
    margin-right:5%; 
} 

.navbar .brand { 
    max-height: 40px; 
    overflow: visible; 
    padding-top: 0; 
    padding-bottom: 0; 
} 
.navbar .nav li{ 
    padding-left: 5px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.navbar .nav li a{ 
    background-color: #00AFE7; 
    color: #000; 
    -webkit-transition:background 1s ease; 
-moz-transition:background 1s ease; 
-o-transition:background 1s ease; 
transition:background 1s ease; 
} 

.navbar .nav li a:focus, 
.navbar .nav li a:hover { 
    color: #FFF; 
    text-decoration: none; 
    background-color: #000; 
    -webkit-transition:background 1s ease; 
-moz-transition:background 1s ease; 
-o-transition:background 1s ease; 
transition:background 1s ease; 
}

HTML

<body> 
    <div class="navbar"> 
     <div class="container"> 
      <div class="navbar-inner"> 
       <button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 

       </button> <a class="brand" href="#"><img class="pull-left "src="img/logo.png" /></a> 

       <!--<a class="navbar-brand pull-left" href="#"><img class="pull-left "src="img/logo.png" /></a>--> 
       <div class="nav-collapse collapse"> 
        <ul class="nav nav-pills pull-right "> 
         <li class="active"><a href="#">Home</a> 
         </li> 
         <li><a href="#">Bikes</a> 
         </li> 
         <li><a href="#">About</a> 
         </li> 
         <li><a href="#">Store</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Main component for a primary marketing message or call to action --> 
    <div class="jumbotron"> 
     <h1>Navbar example</h1> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     <p> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs »</a> 

     </p> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
</body>

來源

2013-08-04 Clutch _

我離開了，在頭我確實添加了引導CSS以及這樣的IM假設我擁有所有必要的組件... –

請嘗試重新說明你的問題。這聽起來像你想要一個下拉菜單。引導程序中的摺疊導航會在狹窄的窗口/移動設備上更改。 – ocodo

我懷疑你是混合引導2和Bootstrap 3碼。

檢查了這一點：
Live view
Edit view

我已經採取了你確切的HTML和CSS，但使用引導2 CSS和JS

如果你確實想使用引導3，雙檢查你是否有正確的CSS和JS文件，你會看到導航欄的HTML已經改變，你可以從

獲取示例導航欄

http://getbootstrap.com/components/#navbar

http://getbootstrap.com/components/#navbar

好運

來源

2013-08-24 18:18:49

引導3摺疊菜單

回答

相關問題