1

在 rails 项目中使用 twitter bootstrap，我的目标是得到类似这样的东西（很好，很简单，并且很容易通过将下面的代码放入 jsfiddle 来证明我不会发疯！）。下面是一张相当 ascii 艺术图片，不幸的是我还不能发布图片：

menu1 menu2 my account
           |  item1   |
           |  item2   |
            ---------

HTML 看起来像这样

<div class="navbar">
<div class="navbar-inner">
<div class="container">     
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
My Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->

我将 Rails 3.2.13 与 bootstrap-sass 2.3.1.2 和 jquery-rails 2.2.1 gem 一起使用。我遇到的问题是，无论我做什么，下拉菜单都会水平呈现（并且在错误的位置）。（再次，请原谅我的 ascii 艺术 - 对不起！）

home home my account
[item1 item2]

我已经用谷歌搜索了，查看了整个堆栈交换，一直在挖掘萤火虫，看看是否有任何明显的我遗漏的东西，但没有快乐 - 有谁知道我正在使用的 gems 或 bootstrap 版本是否有问题（那是我猜是宝石暗示的）？或者对我可能遗漏的内容有什么建议？

如果它像一个错字，我正在使用的实际代码是：

<div class="masthead">
    <div class="container">
    <h3 class="muted pull-left">Page</h3>
    <% if current_user %>  
    <p class="muted pull-right" style="margin-top:23px;">Logged in as: <%= current_user.email %></p>
    <% else %>
    <% end %>
    </div>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <li class="active"><%= link_to 'Home', root_path %></li>
                    <li><%= link_to 'Blog', posts_path %></li>
                    <li><%= link_to 'Demo', demo_path %></li>
                    <li><%= link_to 'About', about_path %></li>
                    <li><%= link_to 'Contact', contact_path %></li>
                    <% if current_user %>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            My Account
                            <b class="caret"></b>
                        </a>
                        <ul class="pull-right dropdown-menu">
                            <li><%= link_to 'Personal Details', demo_path %></li>
                            <li><%= link_to 'Payment History', about_path %></li>
                            <li><%= link_to 'Account Settings', about_path %></li>
                            <li><%= link_to "Log out", log_out_path %></li>
                        </ul>
                    </li>

                    <% else %>
                        <li><%= link_to "Sign up", sign_up_path %></li>
                        <li><%= link_to "Log in", log_in_path %></li>
                    <% end %>
                </ul>
            </div>
        </div>
    </div><!-- /.navbar -->
</div>

导航的唯一 css 覆盖内容如下所示：

.navbar .navbar-inner {
  padding: 0;
}
.navbar .nav {
  margin: 0;
  display: table;
  width: 100%;
}
.navbar .nav li {
  display: table-cell;
  width: 1%;
  float: none;
}
.navbar .nav li a {
  font-weight: bold;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
  border-left: 0;
  border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
  border-right: 0;
  border-radius: 0 3px 3px 0;
}

页面中包含的内容如下：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/comments.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/posts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/comments.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/posts.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

如果有帮助，我们非常乐意提供其他信息 - 谢谢。

更新感谢大卫，我已将其范围缩小到：

.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}

具体来说

display: table-cell;

用于均匀分布菜单项。如果我把它拿出来，菜单将垂直渲染，但是引导布局会变得混乱 - 在这一点上我真的不知道为什么。有谁知道（甚至更好，如何解决它）？谢谢你。

我没有要测试的 Chrome，但不仅仅是 Firefox，我在 Safari 中遇到了同样的问题。

4

2 回答 2

2

我有一个类似的问题。我将其缩小到“显示：表格单元格；” 入口。通过环顾四周和“玩耍”，我设法找到了解决我的情况的方法

第一的：

.navbar .nav li .dropdown-menu li { display: block; width: auto; }

将下拉菜单下的列表项设置为显示为一个块（下拉菜单持有者的最大宽度）。

第二：

.dropdown-menu { left:auto; }

将下拉菜单放在正确的菜单项下。

于 2013-06-20T21:07:57.930 回答
0

尝试适应这样简单的东西：

<header class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <%= link_to "myapp", '#', id: "logo" %>
            <nav>
                    <ul class="nav pull-right">
                            <li><%= link_to "Home", "#" %></li>
                            <li><%= link_to "Foo", "#" %></li>
                            <li><%= link_to "Bar", "#" %></li>
                            <li id="fat-menu" class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                        <li><%= link_to "Foo", "#" %></li>
                                        <li><%= link_to "Bar", "#" %></li>
                                        <li><%= link_to "Baz", "#" %></li>
                                        <li class="divider"></li>
                                        <li>
                                            <%= link_to "Sign out", signout_path, method: "delete" %>
                                        </li>
                                    </ul>   
                            </li>
                    </ul>
                </nav>  
        </div>
    </div>
</header>

另外，我注意到在您的代码中您从未使用过nav标签。这可能会奏效。

于 2013-05-31T05:05:02.187 回答