12
我正在使用Twitter bootstrap和Rails，我似乎無法將導航欄項目浮動到右側。無法使用class = pull-right或float漂浮twitter bootstrap navbar項目：right
我試圖用這樣的：
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
...但鏈接留左，螢火顯示"float:left;"
於是，我就在此改變CSS的float在bootstrap_and_overrides.css.less和home.html.erb，但也工作。 Firebug表示它找到了兩個css浮點語句，但選擇了我的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;
}
何時我加載一個頁面，我看到了導航欄，但最後一個項目沒有浮動到右側。
是這樣的：
而且這裏還有另外一個屏幕帽，顯示some more info。
如您所見，螢火蟲發現"float:right;"選項，但表示使用"float:left;"選項。
我在這裏有一個理解上的差距，但我不知道在哪裏。
請寄來回應：
- 使用的右拉式和Twitter的引導導航欄格式化
- 重寫CSS
解釋螢火輸出
編輯： 我已經張貼了我的第一次在這裏jsfiddle：http://jsfiddle.net/uCHQs/2/ 它代表一個瀏覽器'show source'的複製/粘貼，我收集的是相關的CSS加載和se由鐵軌保存。
在此先感謝！
我有與navbar搜索相同的問題。多謝！ – Bendim