无法使用class = pull-right或float：right浮动twitter bootstrap导航栏项目

I am using Twitter bootstrap and Rails and I can't seem to float a navbar item to the right.

我正在使用Twitter引导程序和Rails，我似乎无法将导航栏项目浮动到右侧。

I tried using something like this:

我试过用这样的东西：

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

... but the link stayed left and firebug showed "float:left;"

......但链接保持不变，萤火虫显示“浮动：左;”

So I tried to overide the css float in bootstrap_and_overrides.css.less and in home.html.erb, but neither worked. Firebug indicated that it found two css float statements, but chose the bootstrap option over mine. So I am left stuck and wondering how to customize the navbar. I am probably doing something wrong here, but I just don't see it.

所以我试图在bootstrap_and_overrides.css.less和home.html.erb中覆盖css float，但都没有奏效。 Firebug表示它找到了两个css float语句，但选择了bootstrap选项。所以我被困住了，想知道如何自定义导航栏。我可能在这里做错了，但我只是看不到它。

Here's my code:

这是我的代码：

application.html.erb:

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:

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

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

When I load a page, I see the navbar, but the last item is not floated to the right.

当我加载页面时，我看到了导航栏，但最后一项没有浮动到右侧。

Looks like this:
无法使用class = pull-right或float：right浮动twitter bootstrap导航栏项目

看起来像这样：

And there is another screen cap here that shows some more info.

此处还有另一个屏幕截图，显示了更多信息。

As you can see, firebug found a "float:right;" option, but indicates a "float:left;" option was used instead.

正如你所看到的，firebug发现了一个“浮动：正确;”选项，但表示“浮动：左;”相反使用了选项。

I have a gap in understanding here, but I am not sure where.

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

Please address responses to:

请回复：

Use of pull-right and twitter bootstrap navbar formatting
使用pull-right和twitter bootstrap导航栏格式
Overriding css
覆盖css
Interpreting firebug output

解释萤火虫输出

EDIT: I've posted my first ever jsfiddle here: http://jsfiddle.net/uCHQs/2/ It represents a copy/paste of a browser 'show source' and what I gather is the relevent css load and served by rails.

编辑：我在这里发布了我的第一个jsfiddle：http：//jsfiddle.net/uCHQs/2/它表示浏览器'show source'的复制/粘贴，我收集的是相关的css加载并由rails提供服务。

Thanks in advance!

提前致谢！

6 个解决方案

#1

Got it.

得到它了。

Getting it to work required filling the container nested in navbar-inner with more than one unordered list of nav elements. This jsfiddle showed me the way http://jsfiddle.net/N6vGZ/4/

要使其工作，需要使用多个无序的nav元素列表填充嵌套在navbar-inner中的容器。这个jsfiddle向我展示了http://jsfiddle.net/N6vGZ/4/的方式

This code works:

此代码有效：

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

#2

have you tried being more specific with your CSS?

你有没有尝试过更具体的CSS？

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

Sometimes if the prior CSS (bootstrap in this case) is very specific, it requires the same level of specificity (or greater) to override it.

有时如果先前的CSS（在这种情况下是bootstrap）非常具体，它需要相同级别的特异性（或更高）来覆盖它。

Might be helpful to post a jsfiddle. Screenshots are difficult to debug ;)

可能有助于发布一个jsfiddle。屏幕截图很难调试;）

#3

The code u have written is

你写的代码是

 class="nav navbar-nav" col-12

The above code can be replaced like this

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

class="nav navbar-nav col-12"

and also at next insert

以及下一次插入

class pull-right in your li button

#4

Try commenting out the line

尝试评论该行

//...REMOVED

#5

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

#6

Add new class = "row"

添加新的class =“row”

what's happened ..in your code . when it is coming in mobile device then div is append on other div . this is simple solution .

发生了什么..在你的代码中。当它进入移动设备时，div会附加到其他div上。这是简单的解决方案。

#1