在小屏幕上保持导航栏水平

Question

我有一个Bootstrap导航栏，里面有2个ul。

第一个UL隐藏在小屏幕上的折叠菜单中。

第二个UL仍然可见。

我遇到的问题是，第二个UL总是垂直显示。我似乎无法覆盖它以水平显示。我一直在检查css，但我发现的任何东西似乎都无法控制它。

http://www.bootply.com/render/121627

（某些css是从// Twitter bootstrap 3 navbar navbar-right outside navbar-collapse借来的）

澄清：

这是我在＆lt; 760px宽屏幕上看到的：

 [ brand ]     -item1      [---]
               -item2

这是我想看到的：

 [ brand ] -item1 -item2  [---]

Answer 1

解决方案是在导航栏上定位ul＆gt; li。

.navbar-right > ul > li { float:left; }

Answer 2

在类似的情况下，这对我有用：

.navbar-right {
    float: right;
}

.navbar-right > li {
    float: left
}

.navbar-right > li > a {
    display: block;
}

Answer 3

对于Bootstrap 4：

.navbar-nav { flex-direction:row !important; }

Answer 4

在 Bootstrap 4 中，将 flex-row 添加到导航栏的 ul 元素。（包含 ul 元素的 li 元素。