Question

当我尝试从Twitter Bootstrap 2.3.2开始页面运行示例Starter模板时，我尝试将页面折叠到更小的尺寸，导航栏项目不会像在演示中那样折叠到角落但是保持拉下拉下拉。我正在使用Rails

gem 'bootstrap-sass' and 
gem 'sass-rails',   '~> 3.2.3' [in assets]

我的application.js文件包括：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

和我的boostrap_and_overides.css.scss文件包括：

@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

我喜欢自适应引导程序的想法，但无法让它工作这是主要代码：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<h1>Hello, world!</h1

 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" 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>
      </button>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

</body>
</html>

Answer 1

我弄清楚问题是什么。为了记录，我使用了宝石'rails'，'3.2.7'，当我更新为gem'trail'，'3.2.13'时问题得到了解决。

当我折叠页面时，响应式bootstrap rails导航栏下拉保持向下

1 个答案: