twitter-bootstrap Twitter Bootstrap：导航栏按钮未显示或切换折叠状态

Twitter Bootstrap: navbar button not showing or toggling collapse

提问by Matthew

I'm adapting Twitter's Bootstrap to my Ruby on Rails tutorial project (By Michael Hartl) and the upper navigation isn't collapsing.

我正在将 Twitter 的 Bootstrap 改编为我的 Ruby on Rails 教程项目（作者：Michael Hartl）并且上部导航没有折叠。

I'm currently getting this:

我目前得到这个：

My end goal is this:

我的最终目标是这样的：

I've copied and pasted the start_template.html into mine, ensured that all the right bootstrap.css and js files are referenced, and don't know how else to tackle this issue.

我已将 start_template.html 复制并粘贴到我的中，确保引用了所有正确的 bootstrap.css 和 js 文件，但不知道如何解决此问题。

My home.html is pasted below (apologies if it's too much code):

我的home.html粘贴在下面（如果代码太多，请见谅）：

<title> Project Name</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">

    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />

  <meta content="authenticity_token" name="csrf-param" />
<meta content="khAXbodB/h2ghLK1iZlFZIU6RtxF1kv//qsyrJVszlE=" name="csrf-token" />



<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> <a href="/">Home</a> </li>
            <li><a href="/about">About</a></li>
            <li> <a href="/help">Help</a> </li>
            <li> <a href="#">Sign In</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>



    <div class="container-fluid">
        <div class="center hero-unit">
<h1>Project Name</h1>
<h2>Subheader and more info</h2>

    <a href="#" class="btn btn-large btn-primary">Sign Up Now!</a>
</div>


        <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

</div>

采纳答案by Zim

The Bootstrap code seems to work fine.. http://bootply.com/60444

Bootstrap 代码似乎工作正常.. http://bootply.com/60444

My guess is that something in /assets/custom.css or /assets/application.css is messing up the Bootstrap 'navbar-fixed-top'.

我的猜测是 /assets/custom.css 或 /assets/application.css 中的某些东西弄乱了 Bootstrap 'navbar-fixed-top'。

You could try putting 'bootstrap-responsive.css' after those and see if that makes a difference.

您可以尝试将“bootstrap-responsive.css”放在这些之后，看看是否有所不同。

回答by Zim

I know one should not add a comment, after an acceptable answer has been submitted. But I really would like to share the way I solved the problem in case this might be useful to someone in the future. For some reasons using class "container" would forbid displaying the button in collapsed state, while using the class="container-fluid" made this button appear. Really, weird.

我知道在提交可接受的答案后，不应添加评论。但我真的很想分享我解决问题的方法，以防将来对某人有用。由于某些原因，使用类“容器”会禁止在折叠状态下显示按钮，而使用类=“容器流体”使此按钮出现。真的很奇怪。