web-dev-qa-db-ja.com

class = pull-rightまたはfloat：rightのいずれかでTwitter bootstrap navbarアイテムを正しくフロートできません

Twitter bootstrap and 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;"を示しました

そこで、bootstrap_and_overrides.css.lessとhome.html.erbでcssfloatをオーバーライドしようとしましたが、どちらも機能しませんでした。 Firebugは、2つの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;
}

ページをロードすると、ナビゲーションバーが表示されますが、最後のアイテムが右にフロートしていません。

このように見えます：
Screen capture showing firebug info

そして、ここに いくつかの詳細情報 を示す別のスクリーンキャップがあります。

ご覧のとおり、firebugは"float:right;"オプションを検出しましたが、代わりに"float:left;"オプションが使用されたことを示しています。

ここでは理解にギャップがありますが、どこにあるのかわかりません。

次の回答に対応してください。

  • プルライトとTwitterの使用bootstrap navbarフォーマット
  • Cssをオーバーライドする

  • Firebugの出力の解釈

    編集：私はここに私の最初のjsfiddleを投稿しました： http://jsfiddle.net/uCHQs/2/ これはブラウザの「ソースの表示」のコピー/貼り付けを表し、私が収集するのは関連するcssロードとRailsによって提供されます。

前もって感謝します！

cssruby-on-railstwitter-bootstrapformattingfirebug
12
Perry Horwich

とった。

それを機能させるには、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>
21
Perry Horwich

cSSをより具体的にしようとしましたか？

.navbar ul.nav li.whoami {
    float:right;
}

以前のCSS（この場合はブートストラップ）が非常に具体的である場合、それをオーバーライドするために同じレベル（またはそれ以上）の特異性が必要になることがあります。

Jsfiddleを投稿すると役立つ場合があります。スクリーンショットのデバッグは困難です;）

3
Jason

Uが書いたコードは

 class="nav navbar-nav" col-12

上記のコードは次のように置き換えることができます

class="nav navbar-nav col-12"

そして次の挿入でも

class pull-right in your li button
1
Stefano

新しいクラスを追加= "行"

あなたのコードで何が起こったのか。それがモバイルデバイスに入ってくると、divは他のdivに追加されます。これは簡単な解決策です。

0
ShreeJi
<li><a href="#examples"><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</a></li>
0
alpc

行をコメントアウトしてみてください

// ...削除されました

0
Jason