在小屏幕上保持导航栏 ul 水平 [英] keeping a navbar ul horizontal on small screens

问题描述

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

I have a Bootstrap navbar that has 2 ul's in it.

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

the first UL hides into the collapse menu on small screens.

第二个 UL 仍然可见.

the second UL is still visible.

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

the problem i've run into, is that second UL always displays vertically. i can't seem to override it to display horizontally. i keep inspecting the css , but nothing i've found seems to control that.

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

(部分 css 借鉴自//Twitterbootstrap 3 导航栏导航栏-右侧导航栏折叠 )

( some of the css is borrowed from // Twitter bootstrap 3 navbar navbar-right outside navbar-collapse )

澄清:

这是我在 <760 像素宽屏幕上看到的:

this is what I see on <760px wide screens:

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

这是我想看到的:

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

推荐答案

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

This is what worked for me in a similar situation:

.navbar-right {
    float: right;
}

.navbar-right > li {
    float: left
}

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

这篇关于在小屏幕上保持导航栏 ul 水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！