无法浮起Twitter的引导导航栏项右与任一类=右拉式或浮动：右(Unable to float a

我使用Twitter的引导和Rails，我似乎无法到导航栏项目浮动的权利。

我试图用这样的事情：

<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 ，但既不工作。萤火虫表示，它发现了两个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;
}

当我打开一个网页，我看到了导航栏，但最后一个项目不浮动的权利。

是这样的：

而且这里还有另外一个屏幕帽，显示一些更多的信息。

正如你可以看到，萤火虫发现了一个"float:right;" 选项，但表示"float:left;" 选项被代替。

我在理解的差距在这里，但我不知道在哪里。

请将您答复：

的右拉式和Twitter的引导导航栏使用格式
压倒一切的CSS
解释萤火输出
编辑：我已经张贴了我的第一次的jsfiddle这里： http://jsfiddle.net/uCHQs/2/它代表了浏览器“显示源”和我收集什么是培训相关的CSS负载的复制/粘贴，并通过轨服务。

提前致谢！

Answer 1:

得到它了。

它前往工作所需填充嵌套在导航栏-内与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>

Answer 2:

你尝试过更加具体与您的CSS？

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

有时，如果事先CSS（引导在这种情况下）是非常具体的，它需要的特异性（或更大）来覆盖它的同一水平。

可能是有益的张贴的jsfiddle。截图难以调试;）

Answer 3:

u必须编写的代码是

 class="nav navbar-nav" col-12

上面的代码可以被替换这样

class="nav navbar-nav col-12"

并在下次插入

class pull-right in your li button

Answer 4:

尝试注释掉线

//...REMOVED

Answer 5:

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

Answer 6:

添加新的类=“行”

发生了什么事..in你的代码。当在移动装置未来然后DIV是附加在其他分区。这是简单的解决方案。

文章来源: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right