[英]Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
我正在使用Twitter引导程序和Rails,我似乎无法将导航栏项目浮动到右侧。
我试过用这样的东西:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
......但是链接保持不变,萤火虫显示"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:right;"
选项,但表示"float:left;"
而是使用了选项。
我在这里理解上有差距,但我不知道在哪里。
请回复:
解释萤火虫输出
编辑:我在这里发布了我的第一个jsfiddle: http : //jsfiddle.net/uCHQs/2/它表示浏览器'show source'的复制/粘贴,我收集的是相关的css加载并由rails提供服务。
提前致谢!
得到它了。
让它工作需要填充嵌套在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_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?
.navbar ul.nav li.whoami {
float:right;
}
有时如果先前的CSS(在这种情况下是自举)是非常具体的,它需要相同的特异性(或更高)级别来覆盖它。
可能有助于发布一个jsfiddle。 屏幕截图很难调试;)
你写的代码是
class="nav navbar-nav" col-12
上面的代码可以像这样替换
class="nav navbar-nav col-12"
以及下一次插入
class pull-right in your li button
尝试评论该行
//...REMOVED
<li><a href="#examples"><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</a></li>
添加新的class =“row”
发生了什么..在你的代码中。 当它进入移动设备时,div会附加到其他div上。 这是简单的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.