Bootstrap nav下拉菜单仅水平显示（Rails 3.2.13，bootstrap-sass 2.3.1.2，jquery-rails 2.2.1）

在rails项目中使用twitter bootstrap，我的目标是得到这样的东西（简单，通过将下面的代码放入jsfiddle以certificate我不会疯狂，可以轻松实现）。 接下来有一个相当ascii艺术图片，遗憾的是我还不能发布图片：

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

HTML看起来像这样

 
 
 
 
 
Home
 
Home
 
  My Account   
 
Home
 
Home
 
 
 
 
 
 
 

我正在使用Rails 3.2.13和bootstrap-sass 2.3.1.2以及jquery-rails 2.2.1 gems。 我遇到的问题是，无论我做什么，下拉菜单都是水平渲染（并且在错误的位置）。 （再次，请原谅我的ascii艺术 – 抱歉！）

 home home my account [item1 item2] 

我用谷歌搜索，看着堆栈交换，一直在挖掘萤火虫，看看是否有任何明显的我失踪，但没有快乐 – 有没有人知道我使用的gem或版本的bootstrap有问题（那是gem暗示我猜）？ 或者对我可能缺少什么有任何建议？

如果它像拼写错误，我使用的实际代码是：

 
 
 
Page
  
Logged in as: 
   
 
 
 
 
 
 
 
 
 
  
  My Account   
 
 
 
 
 
 
  
 
  
 
 
 
  

nav的唯一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; } 

并且页面中包含的内容如下所示：

如果它有帮助，我很乐意提供其他部分 – 谢谢。

更新感谢大卫，我把它缩小到：

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

特别

 display: table-cell; 

用于均匀分配菜单项。 如果我把它拿出来，菜单将垂直渲染，但随后引导布局变得混乱 – 此时我真的不知道为什么。 有谁知道（甚至更好，如何解决它）？ 谢谢。

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

Answer 1

我有类似的问题。 我把它缩小到“显示器：表格单元格”; 条目。 通过环顾四周并“玩”，我设法找到了解决我情况的方法

第一：

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

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

其次：

 .dropdown-menu { left:auto; } 

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

Answer 2

尝试适应这样简单的事情：

 
 
 
 <%= link_to "myapp", '#', id: "logo" %> 
 
 
<%= link_to "Home", "#" %>
 
<%= link_to "Foo", "#" %>
 
<%= link_to "Bar", "#" %>
 
 My Account  
 
<%= link_to "Foo", "#" %>
 
<%= link_to "Bar", "#" %>
 
<%= link_to "Baz", "#" %>
 
 
 <%= link_to "Sign out", signout_path, method: "delete" %> 
 
 
 
 
 
 
  

另外，我注意到你的代码中从未使用过nav标签。 这可能会成功。