如何使 bootstrap 3 导航栏不换行

Question

我有一个 bootstrap 3 导航栏。

JSFiddle

<div class="navbar navbar-inverse no-print">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/portal/home/index/">Logo of Site</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="/portal/home/index/">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Menu Processes<span class="caret"></span></a>

            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Enquiries<span class="caret"></span></a>

            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Reports <span class="caret"></span></a>

            </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Maintenance<span class="caret"></span></a>      
                </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
              <a>Change password</a> 

            </li>
            <li>
                <a href="#">Welcome  Firstname Lastname</a>
            </li>
            <li>
                <a href="#">Log Out</a>
            </li>
        </ul>
    </div>
</div>

当窗口的宽度是完整的桌面大小时，它是正确的。

当窗口宽度小于手机尺寸时正确。

在这两种尺寸之间，它会包裹这个菜单，并将菜单的高度加倍，这是我不想要的。

我认为我唯一的选择可能是增加移动宽度以增加中间宽度，以便导航栏在屏幕截图中以移动模式显示。

我需要什么 css 来实现这一点？

如何强制右侧导航栏<ul> 不允许移动到左侧导航栏<ul> 下方？

Answer 1

试试这个...

@media (max-width: 1230px) {
.navbar-header {
    float: none;
}
.navbar-left,.navbar-right {
    float: none !important;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in{
    display:block !important;
}
}

发件人：http://www.bootply.com/120951

Answer 2

<ul> 是块级元素

你可以在单个<ul>中使用所有li项目

<ul class="nav navbar-nav">
            <li><a href="/portal/home/index/">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Menu Processes<span class="caret"></span></a>

            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Enquiries<span class="caret"></span></a>

            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Reports <span class="caret"></span></a>

            </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Maintenance<span class="caret"></span></a>      
                </li>

            <li>
              <a>Change password</a> 

            </li>
            <li>
                <a href="#">Welcome  Firstname Lastname</a>
            </li>
            <li>
                <a href="#">Log Out</a>
            </li>
        </ul>

或者您可以左右对齐 <ul> 并设置选项卡视图以分别设置 12 列，以便 <ul> 在选项卡视图中看起来更好

主要是密码登录等进入单独的 div 中的顶部栏......所以它不会破坏菜单对齐

Answer 3

默认情况下，导航栏会切换并可以通过视口处的汉堡菜单访问

您最好的选择（我一直对 BS 做的事情！）是在更大的视口处折叠。您可以使用这个方便的 sn-p 代码来做到这一点。

@media (min-width: 768px) and (max-width: 991px) { /* You can change the max-width to whatever you want... */
    .parent-class .navbar-collapse.collapse {
        display: none;
    }
    .parent-class .navbar-collapse.collapse.in {
        display: block;
    }
    .parent-class .navbar-header .collapse, .navbar-toggle {
        display:block;
    }
    .parent-class .navbar-header {
        float:none;
    }
}

以上是一段时间前关于 SO 的另一个答案的修改版本 - 我找不到它的链接（我的电脑上潜伏着这个 sn-p，因为我经常使用它）。

你会注意到我在上面的选择器前面添加了.parent-class，这是为了确保这些样式覆盖默认的 BootStrap 样式，这些样式通常在 767 像素及以下时才会被覆盖...