我正在将 Twitter 的 Bootstrap 调整为我的 Ruby on Rails 教程项目(作者:Michael Hartl),并且上部导航不会折叠。
我目前得到这个:
我的最终目标是:
我已将 start_template.html 复制并粘贴到我的模板中,确保引用了所有正确的 bootstrap.css 和 js 文件,但不知道如何解决此问题。
我的 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>
最佳答案
Bootstrap 代码似乎工作正常.. http://bootply.com/60444
我的猜测是/assets/custom.css 或/assets/application.css 中的某些内容弄乱了 Bootstrap 'navbar-fixed-top'。
您可以尝试将“bootstrap-responsive.css”放在这些后面,看看是否会产生影响。
关于twitter-bootstrap - Twitter Bootstrap : navbar button not showing or toggling collapse,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16326225/