【发布时间】：2014-06-01 11:25:10
【问题描述】：
我在 Rails 4 上使用 bootstrap-sass gem 3.1（所以，我没有使用 LESS——使用 SASS！）。
我的问题是我的 Bootstrap 导航栏没有很快崩溃。由于有额外的导航项，我需要它折叠在 830 到 850 像素的标记附近，而不是我相信的 767。
将其插入我的 application.css.scss 不起作用：
$navbarCollapseWidth: 850px;
@import "bootstrap";
这也不行：
$grid-float-breakpoint: 850px;
@import "bootstrap";
根据我的阅读，grid-float-breakpoint 是一个 LESS 变量，我不确定这是否是 SASS 等价物。有谁知道如何使用与 SASS 兼容的 gem 修改此阈值？谢谢！
编辑：如果有帮助，完整的导航栏代码：
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "About", about_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Rules<b class="caret"></b></a>
<ul class="dropdown-menu">
<% @awards.each do |award| %>
<li><%= link_to award.name, award %></li>
<% end %>
</ul>
</li>
<li><%= link_to "How to Submit", instructions_path %></li>
<li><%= link_to "Contact Us", contact_path %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if signed_in? %>
<li><%= link_to "My Submissions", submissions_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><%= link_to "Account Profile", user_path(current_user.id) %></li>
<li><%= link_to "Change Password", edit_user_registration_path %></li>
<% if current_user.admin? == true %>
<li class="divider"></li>
<li><%= link_to "Admin Dashboard", admin_root_path %></li>
<% end %>
<% if current_user.judge? == true %>
<li class="divider"></li>
<li><%= link_to "Judge Dashboard", scores_path %></li>
<% end %>
<li class="divider"></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% else %>
<li><%= link_to "Create an Account", new_user_registration_path %></li>
<li><%= link_to "Sign In", new_user_session_path %></li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
【问题讨论】：
-
您的导航栏目前是否成功折叠在 767？如果没有，你能分享你的导航栏代码吗？您使用
$grid-float-breakpoint的第二个示例对我有用。您可能还需要考虑使用$screen-sm，因为这会改变.col-sm-之类的折叠大小。 -
@cschroed 是的，我认为它在 767 处成功折叠。刚刚尝试了 $screen-sm，但没有成功。我将粘贴我的导航栏代码，它只是标准的引导程序，但也许会有所帮助。
-
嗯。您是否在您的
application.css.scss文件中包含*= require bootstrap？当您还尝试使用@import "bootstrap";时，这可能会搞砸。如果您有require行，我建议您删除它。如果这不是问题，您能否使用有关您对应用执行的所有 Bootstrap 相关设置步骤的信息更新问题？ -
@cschroed 删除 require 语句没有做任何事情。感谢您在这方面的帮助。我采取的步骤不多说，基本上安装了 bootstrap sass gem，然后从官方引导站点复制不同的站点代码部分（例如导航栏）并将其粘贴到我的 application.html.erb 中。在 application.css.scss 中放入 import 语句，在 application.css 中放入 require 语句。
-
我从来没有用
application.css.scss和application.css文件配置这个。您可能希望将任何必要的设置从application.css移动到application.css.scss（但不要在application.css.scss中包含*= require bootstrap语句）。然后删除application.css。
标签： css ruby-on-rails twitter-bootstrap