Css 无法使用class=pull right或float:right将twitter引导导航栏项向右浮动_Css_Ruby On Rails_Twitter Bootstrap_Formatting_Firebug

Css 无法使用class=pull right或float:right将twitter引导导航栏项向右浮动

css ruby-on-rails twitter-bootstrap formatting

Css 无法使用class=pull right或float:right将twitter引导导航栏项向右浮动,css,ruby-on-rails,twitter-bootstrap,formatting,firebug,Css,Ruby On Rails,Twitter Bootstrap,Formatting,Firebug,我正在使用Twitter引导和Rails，但我似乎无法将导航栏项向右浮动我试着用这样的方法： <li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li> _navigation.html.erb： <!DOCTYPE html

我正在使用Twitter引导和Rails，但我似乎无法将导航栏项向右浮动

我试着用这样的方法：

<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>

_navigation.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>

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

加载页面时，我会看到导航栏，但最后一项不会向右浮动

看起来像这样：

这里还有另一个屏幕显示

如您所见，firebug发现了一个

“float:right；”“

选项，但表示使用了

“float:left；”“

选项

我在理解上有差距，但我不确定在哪里

请回复：

使用pull right和twitter引导导航栏格式
覆盖css
解释firebug输出
编辑：我在这里发布了我的第一个JSFIDLE：它表示浏览器“ShowSource”的复制/粘贴，我收集的是相关的css加载，并由rails提供服务

提前谢谢

您是否尝试过更具体地使用CSS

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

有时，如果先前的CSS（本例中为引导）非常特定，则需要相同级别的特定性（或更高级别）来覆盖它

发布JSFIDLE可能会有所帮助。屏幕截图很难调试；）

试着注释这行

//…删除了

明白了

要使其正常工作，需要在navbar内部嵌套的容器中填充多个无序的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>


“品牌”%>



“管理员”%>
'删除'，：id=>“注销”%>

编辑帐户%>

您编写的代码是

 class="nav navbar-nav" col-12

上面的代码可以这样替换

class="nav navbar-nav col-12"

在下一次插入时也是如此

class pull-right in your li button

添加新class=“行”

发生了什么…在你的代码中。当它进入移动设备时，div被附加到另一个div上。

这是一个简单的解决方案。

谢谢Jason。实际上，我删除了一段已经注释掉的代码，以缩短我的（冗长的）文章。好吧，这确实让我可以覆盖，firebug显示float:对。浏览器仍会在导航栏上放置未向右浮动的项目。我很乐意发布一个JSFIDLE，但不确定如何从多个路径复制大量的js、css和html。有没有一个漂亮的rails方法可以做到这一点？谢谢你的帮助。我得出了上面的答案。我将我的问题描述为“我对CSS开发人员如何思考的理解很差”。现在我看了看工作代码，我想知道为什么花了这么长时间，CSS布局变得更有意义。谢谢你让我也加入了JSFIDLE。我在导航栏搜索中也遇到了同样的问题。太多了！

class="nav navbar-nav col-12"

class pull-right in your li button