无法使用class = pull-right或float：right来悬浮twitter自举导航栏项 [英] Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
问题描述
我尝试使用类似这样的东西：
< li class =whoami pull-right> <％= link_to（登录身份：+ current_user.name），edit_user_registration_path，：id =>编辑帐户％> < / li>
...但链接保持左边，firebug显示float：left ;
所以我试图覆盖css中的浮动 bootstrap_and_overrides.css.less 和 home.html.erb 中，但都没有工作。 Firebug表示它发现了两个css float语句，但选择了在我的bootstrap选项。所以我被困住，想知道如何自定义导航栏。我可能在这里做错了，但我只是看不到它。
这是我的代码：
application.html.erb：
<！DOCTYPE html>
< html>
< head>
...删除以缩短此帖子的长度
< / head>
< body>
< header>
<％= render'layouts / navigation'％>
< / header>
< div id =mainrole =main>
< div class =container>
< div class =content>
< div class =row>
< div class =span12>
<％= render'layouts / messages'％>
<％= yield％>
< / div>
< / div>
< footer>
< / footer>
< / div>
< / div> <！ - ！ .container的末端 - >
< / div> <！ - ！ #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_toCases，root_path，：class =>brand％>
<％if user_signed_in？ ％>
< li> <％= link_to我的案例，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 => 退出％> < / li>
< li class =whoami> <％= link_to（登录身份：+ current_user.name），edit_user_registration_path，：id =>编辑帐户％> < / li>
<％else％>
< li> <％= link_to'Login'，new_user_session_path％> < / li>
< li> <％= link_to'注册'，new_user_registration_path％> < / li>
<％end％>
< / ul>
< / div>
< / div>
< / div>
< / div>
bootstrap_and_overrides.css.less：
@importtwitter / bootstrap / bootstrap;
body {
padding-top：60px;
}
@importtwitter / bootstrap / responsive;
//设置正确的sprite路径
// ... REMOVED以缩短此后的长度
//您的自定义LESS样式表在这里
//
//由于bootstrap是在上面导入的，你可以访问它的mixins，
//你可以使用并继承这里
//
//如果你想覆盖bootstrap自己的变量，这里可以这样做
//查看http://twitter.github.com/bootstrap/less.html的名称和文档
//
//示例：
// @linkColor：＃ff0000;
.whoami {
float：right;
}
当我加载页面时，我看到navbar，
看起来像这样：
此处还有另一个屏幕截图显示一些更多信息。
正如你所看到的，firebug发现一个float：right ;选项，但表示使用float：left;选项。
我在这里有一个理解的差距，但我不知道在哪里。
请回答：
- 使用pull-right和twitter启动导航栏格式
- 覆盖css
-
解释firebug输出
编辑：
我在这里发布了我的第一个jsfiddle： http://jsfiddle.net/uCHQs/2/
它代表浏览器的显示源的复制/粘贴，我收集的是相关的css负载和服务通过铁轨。
提前感谢！
有了它。
让它工作需要填充嵌套在navbar-inner中的容器有多个无序的nav元素列表。这个jsfiddle向我展示了 http://jsfiddle.net/N6vGZ/4/
此代码适用于：
< div class =container span12>
< div class =navbar navbar-fixed-top>
< div class =navbar-inner>
< div class =container>
<％= link_toCases，root_path，：class =>brand％>
< ul class =nav>
<％if user_signed_in？ ％>
< li> <％= link_to我的案例，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 => 退出％> < / li>
< / ul>
< ul class =nav pull-right> < li> <％= link_to（登录身份：+ current_user.name），edit_user_registration_path，：id =>编辑帐户％> < / li>< / ul>
<％else％>
< ul class =nav>
< li> <％= link_to'Login'，new_user_session_path％> < / li>
< li> <％= link_to'注册'，new_user_registration_path％> < / li>
< / ul>
<％end％>
< / ul>
< / div>
< / div>
< / div>
< / div>
I am using Twitter bootstrap and Rails and I can't seem to float a navbar item to the right.
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;"
So I tried to overide the css float in bootstrap_and_overrides.css.less and 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.
Here's my code:
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;
}
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.
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.
Thanks in advance!
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/
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>
这篇关于无法使用class = pull-right或float：right来悬浮twitter自举导航栏项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
