2013-05-01 168 views
2

我正在调整Twitter的Bootstrap到我的Ruby on Rails教程项目(由​​Michael Hartl编写),而上部导航并未崩溃。Twitter Bootstrap:导航栏按钮没有显示或切换折叠

目前我得到这个:

enter image description here

我的最终目标是:

enter image description here

我复制并粘贴到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> 

回答

2

启动代码似乎做工精细.. http://bootply.com/60444

我的猜测是,东西/资产/ custom.css或/assets/application.css正在搞乱Bootstrap'navbar-fixed-top'。

你可以尝试在这些之后加上'bootstrap-responsive.css',看看它是否有所作为。

+0

谢谢!那就是诀窍:) – 2013-05-01 22:03:34

1

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