Bootstrap 3 - 全宽子菜单答案

【问题标题】：Bootstrap 3 - full width sub-menuBootstrap 3 - 全宽子菜单
【发布时间】：2014-02-19 14:09:13
【问题描述】：

我正在尝试使我的子菜单与整个父菜单具有相同的宽度，但是子菜单当然会采用其父 li 的宽度。我还需要将子菜单 li 项目彼此相邻浮动-我尝试进行填充：0 -421%;在下拉菜单上使其与实际父菜单的宽度相同，但由于额外的填充，我当然不能将 li 浮动在下拉菜单中。

<a href="/">

（在我不断收到“jsfiddle 必须伴随代码”错误时添加）。

【问题讨论】：

这里有一个你会非常感兴趣的小提琴。
请把代码贴上去或者尝试在jsfiddle中重现情况。
添加了 jsfiddle，谢谢。
当我理解你的问题后，你也可以使用stackoverflow.com/questions/26449960/…的解决方案，演示：bootply.com/E8DurpOyBi

【解决方案1】：

由于您的子菜单似乎只用于大型设备，我建议固定其宽度：

@media (min-width:991px) {
    #slidemenu .dropdown-menu {
        width: 910px; 
        padding: 5px;
    }
}

为什么910px：

{容器大小} - {容器水平填充} - {navbar-collapse 水平填充}
= 970 - (15 + 15) - (15 + 15)
= 910

【讨论】：

【解决方案2】：

试试这个：

 .dropdown-menu {
     width:597px;
  }
  .dropdown-menu li {
     float: left;
  }

不是最好的方法，但这应该可以满足您的需求。

【讨论】：