TwitterのブートストラップとRailsを使用していますが、ナビゲーションバーのアイテムを右側にフロートさせることができないようです。
私はこのようなものを使ってみました：
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
...しかし、リンクは左に留まり、firebugが表示されました"float:left;"
だから私はcssフロートをオーバーライドしようとしましたbootstrap_and_overrides.css.lessがhome.html.erb、どちらも機能しませんでした。Firebugは、2つのcss floatステートメントが見つかったことを示しましたが、私のものよりもブートストラップオプションを選択しました。だから私は立ち往生していて、ナビゲーションバーをカスタマイズする方法を考えています。私はおそらくここで何か間違ったことをしているのですが、私はそれを見ていません。
これが私のコードです：
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;
}
ページをロードすると、ナビゲーションバーが表示されますが、最後のアイテムが右にフロートしていません。
このように見えます：
そして、ここにもう少し情報を表示する別のスクリーンキャップがあります。
ご覧のとおり、firebugは"float:right;"オプションを見つけましたが、代わりにオプションが使用されたことを示してい"float:left;"ます。
ここでは理解にギャップがありますが、どこにあるのかわかりません。
次の回答に対応してください。
- プルライトおよびツイッターブートストラップナビゲーションバーフォーマットの使用
- cssをオーバーライドする
ファイアバグ出力の解釈
編集：私はここに私の最初のjsfiddleを投稿しました：http：//jsfiddle.net/uCHQs/2/これ はブラウザの「ソースの表示」のコピー/貼り付けを表し、私が収集するのは関連するcssロードであり、レールによって提供されます。
前もって感謝します！