我正在使用 Twitter bootstrap 和 Rails，但我似乎无法将导航栏元素 float 到右侧。
我尝试使用这样的东西:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
...但链接停留在左边， Firebug 显示 "float:left;"
所以我试图覆盖 bootstrap_and_overrides.css.less 和 home.html.erb 中的 css float ，但都没有奏效。 Firebug 表示它找到了两个 css float 语句，但选择了 bootstrap 选项而不是我的。所以我被困住了，想知道如何自定义导航栏。我可能在这里做错了什么，但我没有看到它。
这是我的代码:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
... removed to shorten the length of this post
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
_navigation.html.erb:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<%= link_to "Cases", root_path, :class=>"brand"%>
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
<li class="whoami"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
<% else %>
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
bootstrap_and_overrides.css.less:
@import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
@import "twitter/bootstrap/responsive";
// Set the correct sprite paths
// ...REMOVED to shorten the length of this post
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;
.whoami {
float:right;
}
当我加载页面时，我看到了导航栏，但最后一项没有 float 到右侧。
看起来像这样:
这里还有另一个屏幕截图显示 some more info .
如您所见，firebug 找到了一个 "float:right;" 选项，但表明使用了 "float:left;" 选项。
我这里理解有差距，但不知道在哪里。
请回复:
- 使用 pull-right 和 twitter Bootstrap 导航栏格式
- 覆盖css
解释 firebug 输出
编辑: 我在这里发布了我的第一个 jsfiddle:http://jsfiddle.net/uCHQs/2/ 它代表浏览器“显示源”的复制/粘贴，我收集的是相关的 css 负载并由 rails 提供服务。
提前致谢!
最佳答案
知道了。
要让它工作，需要用多个导航元素的无序列表填充嵌套在 navbar-inner 中的容器。这个 jsfiddle 向我展示了 http://jsfiddle.net/N6vGZ/4/ 的方式
此代码有效:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "Cases", root_path, :class=>"brand"%>
<ul class="nav">
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
</ul>
<ul class="nav pull-right"> <li> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li></ul>
<% else %>
<ul class="nav">
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
关于css - 无法使用 class=pull-right 或 float :right 向右浮动 twitter Bootstrap 导航栏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12992493/