2012-10-20 4 views
12

私はTwitterのブートストラップとRailsを使用しています。twitterのbootstrap navbarアイテムをclass = pull-rightまたはfloatのいずれかでフロートできません:right

私はこのような何か使用してみました:

<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は、2つのcss floatステートメントを見つけたが、私の上にはブートストラップオプションを選択していた。だから、私は立ち往生して、navbarをカスタマイズする方法が不思議です。私はおそらくここで何か間違っているが、私はそれを見ていない。

は、ここに私のコードです:

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; 
} 

私はページをロードします、私はnavbarを見ますが、最後の項目は右に浮かんでいません。

は次のようになります。
Screen capture showing firebug info

そしてsome more infoを示し、ここで別の画面のキャップがあります。

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

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

への応答に対処してください:私は私の最初の投稿をしました :

  • オーバーライドCSS Firebugの出力に

    EDITの解釈

  • をフォーマットプルライトやTwitterのブートストラップナビゲーションバーの

    • 使用をこれまでのjsfiddleはここにあります:http://jsfiddle.net/uCHQs/2/ これはブラウザ 'show source'のコピー/ペーストを表し、私が収集したものは関連するCSSの読み込みと読み込みですレールで浮かぶ。

    ありがとうございます!

  • 答えて

    21

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

    navbar-innerにネストされたコンテナに、複数の順序付けられていないnav要素のリストを埋め込む必要がありました。

    <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> 
    
    +0

    私はnavbar-searchで同じ問題を抱えていました。ありがとう! – Bendim

    3

    あなたはあなたのCSSでより具体的にしようとしましたか?前CSS(ここでは、ブートストラップ)は、非常に特異的である場合

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

    は時々、それを上書きする特異性(またはそれ以上)の同じレベルを必要とします。

    jsfiddleを投稿すると役に立ちます。スクリーンショットは、デバッグが困難され、それを手に入れた)

    +0

    まあ、それは私が上書きすることを可能にし、火花虫はフロートを示す:右。ブラウザは、まだnav-barを、私たちの項目を浮動小数点にします。私はjsfiddleを投稿して嬉しいですが、複数のパスからたくさんのjs、css、およびhtmlのように見えるものをコピーする方法がわかりません。それを行うためのすてきなレール - 方法がありますか? –

    +0

    ご協力ありがとうございます。私は上記の答えに到着しました。私は自分の問題を「CSS開発者がどのように考えているかについての私の貧弱な理解」の1つとして特定したいと思います。作業コードを見てきた今、私はなぜこれほど長い時間がかかり、CSSのレイアウトがもっと理にかなっているのだろうかと思います。 jsfiddleに私をcluingしてくれてありがとう。 –

    0

    //...REMOVED

    +0

    ありがとうございました。私は実際に私の(長い)投稿を短縮するために既にそこにコメントアウトされたコードのブロックを削除しました。 –

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

    uが書かれているコードは

    class="nav navbar-nav" col-12 
    

    である上記のコードは、この

    class="nav navbar-nav col-12" 
    
    のように置き換えることができます。これjsfiddleは私 http://jsfiddle.net/N6vGZ/4/

    このコードの動作方法を示しました

    およびnexトンあなたのコード..in起こった何= "行"

    を新しいクラスを追加し

    class pull-right in your li button 
    
    0

    を挿入します。それがモバイルデバイスに来るとき、divは他のdivに追加されます。 これは簡単な解決策です。

    関連する問題