css – 无法使用class = pull-right或float：right来浮动一个twitter引导导航栏项目

我正在使用Twitter引导和Rails,我似乎不能浮动一个导航栏项目在右边.

我试过使用这样的东西：

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

…但链接留下来,火焰显示“浮动：左”;

所以我试图在bootstrap_and_overrides.css.less和home.html.erb中覆盖css float,但都没有工作. Firebug表示它发现了两个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),: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;
}

当我加载页面时,我看到导航栏,但最后一个项目没有浮动到右侧.

看起来像这样：

而这里还有另一个屏幕截图显示了some more info.

你可以看到,firebug发现了一个“float：right;”选项,但表示“float：left;”选项被替代.

我在这里的理解有差距,但我不知道在哪里.

请回覆：

>使用pull-right和twitter bootstrap navbar格式化
>覆盖css
>解释firebug输出

编辑：
我已经发布了我的第一个jsfiddle在这里：http://jsfiddle.net/uCHQs/2/
它表示浏览器“显示源”的复制/粘贴,我收集的是相关的css加载并由rails提供.

提前致谢！

解决方法

得到它了.

使其正常工作需要使用多个无序的导航元素列表填充嵌套在navbar-inner中的容器.这个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",:class=>"brand"%>
          <ul class="nav">
          <% if user_signed_in? %>
              <li> <%= link_to "My Cases",:id => "Logout" %> </li>
          </ul>
           <ul class="nav pull-right"> <li> <%= link_to ("Logged in as: " + current_user.name),:id=>"Edit account"%> </li></ul>
          <% else %>
            <ul class="nav">
              <li> <%= link_to 'Login',new_user_registration_path %> </li>
            </ul>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</div>

css – 无法使用class = pull-right或float：right来浮动一个twitter引导导航栏项目

解决方法

相关推荐