我使用的是Rails4和bootstrap-sass gem 3.1 (所以,我没有使用LESS--使用SASS!)。
我的问题是我的Bootstrap导航栏没有很快崩溃。因为额外的导航项目,我需要它在830到850px的标记附近崩溃,而不是,我相信,767。
将此代码插入到我的application.css.scss中不起作用:
$navbarCollapseWidth: 850px;
@import "bootstrap";这也不是:
$grid-float-breakpoint: 850px;
@import "bootstrap";根据我所读到的,grid-浮动-断点是一个较少的变量,我不确定它是否等同于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>发布于 2014-06-01 11:25:10
您是否打算在移动设备中将其折叠?这样你就可以尝试添加这个:
<meta name="viewport" content="width=device-width, initial-scale=1.0">它将在移动设备上正确呈现。
Reference
https://stackoverflow.com/questions/23921165
复制相似问题