Bootstrap导航下拉菜单仅水平显示（Rails 3.2.13，bootstrap-sass 2.3.1.2，jquery-rails 2.2.1） [英] Bootstrap nav dropdown-menu only showing horizontally (Rails 3.2.13, bootstrap-sass 2.3.1.2, jquery-rails 2.2.1)
问题描述
在Rails项目中使用twitter引导程序，我的目标是得到类似这样的东西（很简单，可以通过将下面的代码放入jsfiddle中以证明我不会发疯！不幸的是，我收到的图片如下：
菜单2我的帐户
| 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>
我的帐户
< 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宝石。我遇到的问题是，无论我做什么，下拉菜单都是水平呈现的（在错误的位置）。 （再次，请原谅我ascii艺术-对不起！）
home home我的帐户
[item1 item2]
我一直在Google上搜索，到处都是堆栈交换，一直在挖虫子，看看我是否有明显的东西。失踪了，但没有喜悦-有人知道我使用的gems或引导程序版本是否有问题（我猜这是gem暗示的）吗？或对我可能会缺少的东西有什么建议？
如果它是一个错字，我正在使用的实际代码是：
< div class = masthead>
< div class = container>
< h3 class =静音左上角>页面< / h3>
<％（如果current_user％>
< p class = muted pull-right style = margin-top：23px;>登录为：<％= current_user.email％>< / p>
<％else％>
<％end％>
< / div>
< div class = navbar>
< div class = navbar-inner>
< div class = container>
< ul class = nav>
< li class = active><％=链接到首页，root_path％>< / li>
< li><％= link_to'Blog'，posts_path％>< / li>
< li><％= link_to'Demo'，demo_path％>< / li>
< li><％= link_to到关于，about_path％>< / li>
< li><％=链接到联系人，contact_path％>< / li>
<％（如果current_user％>
< li class = dropdown>
< a href =＃ class = dropdown-toggle data-toggle = dropdown>
我的帐户
< b class = caret>< / b>
< / a>
< ul class = pull-right dropdown-menu>
< li><％=链接到个人详细信息，demo_path％>< / li>
< li><％=链接到付款历史，about_path％>< / li>
< li><％=链接到帐户设置，about_path％>< / li>
< li><％= link_to注销，log_out_path％>< / li>
< / ul>
< / li>
<％else％>
< li><％= link_to Sign up，sign_up_path％>< / li>
< li><％= link_to登录，log_in_path％>< / li>
<％end％>
< / ul>
< / div>
< / div>
< / div><！-/ .navbar->
< / div>
导航中唯一的CSS替代内容如下：
.navbar .navbar-inner {
padding：0;
}
.navbar .nav {
margin：0;
显示：表格；
宽度：100％；
}
.navbar .nav li {
display：table-cell;
宽度：1％；
float：无；
}
.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 = 文本/ 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>
如果有帮助，我很乐意提供其他信息-谢谢。
更新多亏了David，我将其范围缩小到：
.navbar .nav li {
display：table-cell;
宽度：1％；
float：无；
}
具体
display：table-cell;
用于均匀分配菜单项。如果我将其删除，则菜单将垂直显示，但是引导程序布局将变得一团糟-在这一点上，我真的不知道为什么。有谁知道（甚至更好，如何解决）？谢谢。
我没有要测试的Chrome，但不仅仅是Firefox，在Safari中我遇到了同样的问题。
我遇到了类似的问题。我将其范围缩小到 display：table-cell;。条目。通过环顾四周和玩耍，我设法找到适合自己情况的解决方法
首先：
.navbar .nav li .dropdown-menu li {display：block;宽度：自动； }
设置下拉菜单下的列表项显示为块（下拉菜单的最大宽度）
其次：
.dropdown-menu {左：自动; }
将下拉菜单置于正确的菜单项下。
Using twitter bootstrap in a rails project, I'm aiming to get something looking like this (nice and simple, and readily achievable by putting the below code into jsfiddle to prove I'm not going crazy!). There follows a rather ascii art picture as unfortunately I can't post images yet:
menu1 menu2 my account
| item1 |
| item2 |
---------
the HTML looks like this
<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 -->
I'm using Rails 3.2.13 with the bootstrap-sass 2.3.1.2 and jquery-rails 2.2.1 gems. The problem I'm having is, that no matter what I do, the dropdown menu is rendered horizontally (and in the wrong place). (again, forgive me the ascii art - sorry!)
home home my account
[item1 item2]
I've googled, looked all over stack exchange, been digging in firebug to see if there's anything obvious I'm missing, but no joy - does anyone know if there's an issue with the gems or version of bootstrap I'm using (that's implied by the gem I guess)? Or have any suggestions as to what I might be missing?
In case it's something like a typo, the actual code I'm using is:
<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>
The only css override stuff for the nav looks like this:
.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;
}
and the includes in the page as it's rendered are as follows:
<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>
more than happy to provide other bits if it helps - thank you.
UPDATE Thanks to David, I've narrowed it down to:
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
specifically
display: table-cell;
which is used to distribute the menu items evenly. If I take that out, the menu will render vertically, but then the bootstrap layout goes haywire - at this point I don't really know why. Does anyone know (or even better, how to fix it)? Thank you.
I don't have Chrome to test with, but it's not just Firefox, I get the same issue in Safari.
I had a similar problem. I narrowed it down to the "display: table-cell;" entry. Through looking around and 'playing' I managed to find a fix for my situation
First:
.navbar .nav li .dropdown-menu li { display: block; width: auto; }
to set the list items under the dropdown to display as a block (with max width of the dropdown menu holder).
Secondly:
.dropdown-menu { left:auto; }
to place the dropdown under the correct menu-item.
这篇关于Bootstrap导航下拉菜单仅水平显示（Rails 3.2.13，bootstrap-sass 2.3.1.2，jquery-rails 2.2.1）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
