12

我正在使用 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 inbootstrap_and_overrides.css.less和 in home.html.erb,但都没有奏效。Firebug 表示它找到了两个 css float 语句,但选择了 bootstrap 选项而不是我的。所以我被困住了,想知道如何自定义导航栏。我可能在这里做错了什么,但我只是没有看到。

这是我的代码:

应用程序.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;
}

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

看起来像这样:
显示萤火虫信息的屏幕截图

这里还有另一个屏幕截图,显示了更多信息

如您所见,firebug 找到了一个"float:right;"选项,但表明"float:left;"使用了一个选项。

我在这里理解有差距,但我不确定在哪里。

请回复以下内容:

  • 使用 pull-right 和 twitter 引导导航栏格式
  • 覆盖css
  • 解释萤火虫输出

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

提前致谢!

4

6 回答 6

21

知道了。

让它工作需要用多个导航元素的无序列表填充嵌套在 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", 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>
于 2012-10-20T22:35:11.293 回答
3

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

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

有时,如果先前的 CSS(在这种情况下为引导程序)非常具体,则需要相同级别的具体性(或更高)来覆盖它。

发布 jsfiddle 可能会有所帮助。截图很难调试;)

于 2012-10-20T20:57:17.743 回答
1

你写的代码是

 class="nav navbar-nav" col-12

上面的代码可以这样替换

class="nav navbar-nav col-12" 

并且在下一个插入时

class pull-right in your li button
于 2014-06-24T10:44:42.697 回答
0

尝试注释掉该行

//...删除

于 2012-10-20T20:58:16.103 回答
0
<li><a href="#examples"><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</a></li>
于 2013-12-05T17:23:42.060 回答
0

添加新类=“行”

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

于 2015-12-03T10:34:45.233 回答