CSS 无法使用 class=pull-right 或 float:right 正确浮动 twitter bootstrap 导航栏项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12992493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
提问by Perry Horwich
I am using Twitter bootstrap and Rails and I can't seem to float a navbar item to the right.
我正在使用 Twitter 引导程序和 Rails，但似乎无法将导航栏项目向右浮动。
I tried using something like this:
我尝试使用这样的东西：
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
... but the link stayed left and firebug showed "float:left;"
...但链接留在左边，萤火虫显示 "float:left;"
So I tried to overide the css float in bootstrap_and_overrides.css.lessand in home.html.erb, but neither worked. Firebug indicated that it found two css float statements, but chose the bootstrap option over mine. So I am left stuck and wondering how to customize the navbar. I am probably doing something wrong here, but I just don't see it.
所以我试图覆盖 css float inbootstrap_and_overrides.css.less和 in home.html.erb，但都没有奏效。Firebug 表示它找到了两个 css float 语句，但选择了引导选项而不是我的。所以我被困住了，想知道如何自定义导航栏。我可能在这里做错了什么，但我只是没有看到。
Here's my code:
这是我的代码：
application.html.erb:
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:
_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:
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;
}
When I load a page, I see the navbar, but the last item is not floated to the right.
当我加载一个页面时，我看到了导航栏，但最后一项没有浮动到右侧。
Looks like this:
看起来像这样：
And there is another screen cap here that shows some more info.
这里还有另一个屏幕截图显示了更多信息。
As you can see, firebug found a "float:right;"option, but indicates a "float:left;"option was used instead.
如您所见，firebug 找到了一个"float:right;"选项，但表示使用了一个"float:left;"选项。
I have a gap in understanding here, but I am not sure where.
我在这里理解有差距，但我不确定在哪里。
Please address responses to:
请回复以下地址：
- Use of pull-right and twitter bootstrap navbar formatting
- Overriding css
Interpreting firebug output
EDIT: I've posted my first ever jsfiddle here: http://jsfiddle.net/uCHQs/2/It represents a copy/paste of a browser 'show source' and what I gather is the relevent css load and served by rails.
- 使用 pull-right 和 twitter bootstrap 导航栏格式
- 覆盖 CSS
解释萤火虫输出
编辑：我在这里发布了我的第一个 jsfiddle：http: //jsfiddle.net/uCHQs/2/它代表浏览器“显示源”的复制/粘贴，我收集的是相关的 css 加载并由 rails 提供.
Thanks in advance!
提前致谢！
回答by Perry Horwich
Got it.
知道了。
Getting it to work required filling the container nested in navbar-inner with more than one unordered list of nav elements. This jsfiddle showed me the way http://jsfiddle.net/N6vGZ/4/
让它工作需要用一个以上的导航元素的无序列表填充嵌套在 navbar-inner 中的容器。这个 jsfiddle 向我展示了http://jsfiddle.net/N6vGZ/4/
This code works:
此代码有效：
<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>
回答by Jason
have you tried being more specific with your CSS?
您是否尝试过更具体地使用您的 CSS？
.navbar ul.nav li.whoami {
float:right;
}
Sometimes if the prior CSS (bootstrap in this case) is very specific, it requires the same level of specificity (or greater) to override it.
有时，如果先前的 CSS（在这种情况下是引导程序）非常具体，则需要相同级别（或更高级别）的特异性来覆盖它。
Might be helpful to post a jsfiddle. Screenshots are difficult to debug ;)
发布 jsfiddle 可能会有所帮助。截图很难调试 ;)
回答by Stefano
The code u have written is
你写的代码是
class="nav navbar-nav" col-12
The above code can be replaced like this
上面的代码可以这样替换
class="nav navbar-nav col-12"
and also at next insert
以及在下一个插入
class pull-right in your li button
回答by ShreeJi
Add new class = "row"
添加新类 =“行”
what's happened ..in your code . when it is coming in mobile device then div is append on other div . this is simple solution .
发生了什么..在你的代码中。当它进入移动设备时，将 div 附加到其他 div 上。这是简单的解决方案。
回答by Jason
Try commenting out the line
尝试注释掉该行
//...REMOVED
//...删除
回答by alpc
<li><a href="#examples"><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</a></li>
