水平菜单手风琴 Bootstrap 3.3.6

Question

我需要帮助。我正在做一个使用手风琴的演示。这个问题是我需要在一条线上手风琴。在下面的示例中，我的步骤在桌面模式下看起来不错 "that's how I have to do it" 但在移动模式下，3 条线彼此下方放置，而这正是我所没有的。我在每个 <LI> 中放了一个 float:left 但它的内容让我感到不安。

代码： http://bootsnipp.com/user/snippets/l06gQ

可见：

打开标签页时，移动模式下的内容应该在左侧居中。

有什么解决办法吗？

Answer 1

如果我理解正确，那么 bootstrap.css 会在较小的屏幕尺寸上覆盖它。

尝试添加以下内容。

.nav>li{display:inline-block}

或者您可能希望将其设置为仅适用于手机。

@media (max-width: 768px) {
    .nav>li{display:inline-block}
}

或者，如果您只想将其应用于该菜单而不是其他菜单

#menuEstatic .nav>li {display:inline-block}

如果您愿意，您也可以使用 float:left 作为 display:inline 块的替代方法。