Navbar摺疊與引導不起作用

我想在調整屏幕大小時導致崩潰的導航欄，所以我想使用Bootstrap。Navbar摺疊與引導不起作用

在application.html.erb：

<body> 
    <div class="navbar navbar-fixed-top"> 
    <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> 
     <a class="brand" href="#">Some Store</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li><%= link_to "Browse Products" %></li> 
      <li><%= link_to "Price List" %></li> 
      <li><%= link_to "Contact Us" %></li> 
      <li><%= link_to "Cart" %></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>

在Gemfile中我有gem 'bootstrap-sass'

在application.css.scss我寫@import 'bootstrap;'

在application.js我//= require bootstrap

我不明白爲什麼它不起作用，我只是從引導站點複製

來源

2013-11-26 zer0uno

您的導入是正確的，但是您的當前標記不是。它與我在一些例子中看到的標記和類不匹配。我首先嚐試使用引導文檔中的sticky footer with fixed navbar example作爲指導，以便使標記正確顯示。下面是如何調整你的標記：

<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="sr-only">Toggle Navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Some Store</a> 
    </div> <!-- end div class="navbar-header" --> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><%= link_to "Browse Products" %></li> 
     <li><%= link_to "Price List" %></li> 
     <li><%= link_to "Contact Us" %></li> 
     <li><%= link_to "Cart" %></li> 
     </ul> 
    </div> <!-- end div class="collapse navbar-collapse" --> 
    </div> <!-- end div class="container" --> 
</div> <!-- end div class="navbar navbar-default navbar-fixed-top" -->

如果你仔細觀察，我換的div的位置與類container和navbar-inner，改變了類<div class="navbar-header">包圍摺疊按鈕。然後，我必須更改菜單項周圍的div，以獲得類navbar-collapse而不是您所擁有的nav-collapse，否則菜單項會消失。爲了使按鈕起作用，我將其從<a>標記更改爲<button>標記以及data-target="navbar-collapse"屬性以正確定位可摺疊菜單項目。一旦做出這些更改，我就可以使用窗口大小爲< 768px的功能下拉菜單。

並且不要忘記爲padding-top:51px;的<body>標記添加樣式，以保證您的網站內容顯示在固定導航欄下方。

希望有幫助！

克里斯

來源

2013-11-30 03:20:27 schenkman

請檢查您的application.html.erb文件中的標頭中添加該

<meta charset="UTF-8"> <meta name=viewport content="width=device-width, initial-scale=1">

來源

2017-05-04 04:14:18

Navbar摺疊與引導不起作用

回答

相關問題