如何獲得引導切換欄和下拉菜單？

我似乎無法得到下拉和切換按鈕的工作。我知道很多人遇到過這個問題，但我還沒有找到解決方案。如何獲得引導切換欄和下拉菜單？

<!DOCTYPE HTML> 
<HTML> 
    <head> 
     <title>Bootstrap</title> 
     <meta name="viewport" content="width=device-width, initial scale=1.0"> 
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
     <link href="css/styles.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <a href="#" class="navbar-brand">PRECISE</a> 
       <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="collapse navbar-collapse navHeaderCollapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="active"><a href="#">Home</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Tweet</a></li> 
          </ul> 
         </li> 
         <li><a href="#">About Us</a></li> 
         <li><a href="#">Contact Us</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="js/bootstrp.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
      }); 
     </script> 
    </body> 
</HTML>

來源

2013-10-30 keren

發生這種情況是因爲崩潰類overflow設置爲hidden。但是，將overflow設置爲visible即可。解決方案是在切換欄可見時強制執行height屬性。你必須設置這樣的height所有的下拉菜單都會顯示。在這種情況下，設置100px就足夠了。還需要添加!important。

.collapse.in { 
    height: 100px !important; 
}

確保您導入bootstrap.js正確：

<script src="js/bootstrp.js"></script>

看起來你錯過了字母「a」字中的「引導」。

希望這有助於。

來源

2013-10-30 23:12:54 luke

我嘗試添加它的CSS文件，它仍然無法正常工作。 – keren

請嘗試更新的版本。 – luke

偉大的工作盧克！謝謝！它確實解決了導航欄切換問題，但我仍然無法看到下拉菜單中的項目。 – keren

添加以下代碼到你的CSS就會使下拉菜單的工作： -

.dropdown:hover .dropdown-menu { 
display: block; 
color:#*any*;   
}.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { 
margin-top: 0; 
}  
.dropdown:hover .dropdown-toggle{ 
background-color: #*any*; 
color:#*any*; 
}

而在你的HTML頁面中做如下修改： -

<div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
     <li class="dropdown"> 
        <a href="#" class="dropdown-toggle">Dropdown 
              <b class="caret"></b></a> 
       <ul class="dropdown-menu" role = "menu" area-labelledby = "dLabel"> 
       <li><a href="#">Action 1</a></li> 
       <li><a href="#">Action 2</a></li> 
       <li><a href="#">Action 3</a></li> 
       </ul> 
      </li> 
      </ul> 
</div>

來源

2013-12-11 06:48:27 user1989865

這對我有用。謝謝 – NoviceDeveloper

如何獲得引導切換欄和下拉菜單？

回答

相關問題