導航欄不能摺疊使用引導程序

Question

我有一個使用Twitter Bootstrap製作的網站。在大屏幕上，導航欄看起來不錯，但如果您在手機上看到相同的導航欄，則導航欄不會摺疊。

這是我的代碼：

<div class="container"> 
    <div class="masthead"> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
      <li class="active"><a href="/" class="">Home</a></li> 
      <li><a href="goud-zilver.html">Oud goud en zilver</a></li> 
      <li><a href="koersen.html">Officiële koersen</a></li> 
      <li><a href="webshop/" target="_blank">Webwinkel</a></li> 
      <li><a href="diversen.html">Diversen</a></li> 
      <li><a href="contact.php">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </div><!-- /.navbar --> 
    </div> 

在第三類我還試圖用淨資產價值崩潰，但隨後也暈倒在大屏幕上。

Answer 1

是按照說明from Betty St（包括響應CSS，引導-collapse.js和轉換插件更新：（bootstrap-transition.js）和jQuery）。你需要添加一個觸發崩潰的按鈕/鏈接。這個標籤獲取屬性：data-toggle =「collapse」data-target =「。nav-collapse」其中data-target可以是任何css選擇器。把數據目標下選擇的標籤之間的導航，請參閱：http://bootply.com/62921

HTML：

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

      <div class="nav-collapse"> 
       <ul class="nav"> 
       <li class="active"><a href="/" class="">Home</a></li> 
       <li><a href="goud-zilver.html">Oud goud en zilver</a></li> 
       <li><a href="koersen.html">Officiële koersen</a></li> 
       <li><a href="webshop/" target="_blank">Webwinkel</a></li> 
       <li><a href="diversen.html">Diversen</a></li> 
       <li><a href="contact.php">Contact</a></li> 
       </ul> 
       </div> 
      </div> 
      </div> 
     </div><!-- /.navbar --> 
     </div> 
</div> 

更新 您的代碼缺少轉換插件（自舉transition.js）所要求的Collapse插件。更重要的是你沒有包含jQuery。 現在應該看到工作：http://plnkr.co/l66QqCftGNsaG0xkBrUf

的JavaScript包括：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script> 
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script> 

注：考慮到包括完整的JavaScript的編譯（或精縮）版本：

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 

您還需要更改摺疊後的款式：

.navbar .in .nav li { 
    display: block; 
    float: none; 
    width:100%; 
} 

Answer 2

您需要包含twitter bootstrap的響應css文件，並且還使用bootstrap-collapse.js。

注意在 '響應導航欄' 上http://twitter.github.io/bootstrap/components.html#navbar的信息：

注意！響應式導航欄需要摺疊插件和響應式Bootstrap CSS文件。

快速鏈接：

• CSS：http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
• JS：http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js

Answer 3

1. 你需要有bootstrap.js或bootstrap.min.js的compiled version與崩潰和過渡檢查[因此包括用於編譯。
2. 給你的父div和id。如果它已經有一個，請記下它。你的父母DIV將是其直接孩子包括下拉[鏈接，按鈕等]
3. 添加data-toggle和data-target到每個子元素我們之前談到的父DIV的之一。
   假設父div的是id="my_parent_div"，該子元素應分別附加鏈接屬性裏面data-toggle="collapse" data-target="#my_parent_div"。

下面是我的固定導航欄的代碼示例：

<div class="collapse navbar-collapse" id="example-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#book" data-toggle="collapse" data-target="#example-navbar-collapse">Book a Room!</a></li> 
     <li class="divider"></li> 
     <li><a href="#services" data-toggle="collapse" data-target="#example-navbar-collapse">Services</a></li> 
     <li><a href="#packages" data-toggle="collapse" data-target="#example-navbar-collapse">Packages</a></li> 
     <li><a href="#contacts" data-toggle="collapse" data-target="#example-navbar-collapse">Location</a></li> 
     </ul> 
    </div> 

希望這有助於:)

Answer 4

我有類似的問題。我完全不明白爲什麼我的導航欄不能在手機中崩潰。 Atlast我發現我錯過了下面的元標記。

<meta name="viewport" content="width=device-width, user-scalable=false;">

這將解決這個問題。

Answer 5

我有同樣的問題，我發現我加載jQuery兩次，並且我在腳本中加載jQuery後，AFTER bootstrap。出於某種原因，除了崩潰外，其他所有工作都在頁面上進行。我回到基礎，它解決了這個問題。加載jQuery，然後引導，並確保沒有其他隨機包含加載jQuery的頁面。 這涉及引導4導航元素。