Question

我有一个bootstrap 3导航栏。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/white" />
    <item android:state_focused="true" android:color="@android:color/white" />
    <item android:state_pressed="true" android:color="@android:color/white" />
    <item android:color="#82c6e6" />
</selector>

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

当窗口宽度较小时，手机大小正确。

在这两种尺寸之间，它包装了这个菜单，并且加倍了我不想要的菜单高度。

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

我需要达到什么样的css？

如何强制右侧导航栏<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>不允许移动到左侧导航栏<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> is a block level element

you can use all li items in single <ul>

<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>

Or you can align right and left align both <ul> and set tab view to set 12 columns each so both <ul> look better in tab view

mostly password login etc goes to top bar in a separate div.......so it will not break menu alignment

Answer 3

默认情况下，导航栏切换并可通过视口中的汉堡菜单访问＆lt; = 767px ...

你最好的选择（我一直用BS做的事情！）就是在较大的视口中崩溃。您可以使用这个方便的代码片段来完成此操作。

@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之前的另一个答案的修改版本 - 我无法找到它的链接（我经常在我的电脑上潜伏着这个片段。）

您注意到我已将.parent-class添加到上面的选择器中，这是为了确保这些样式覆盖默认的BootStrap样式，这些样式通常不会被覆盖直到767px及以下。 ..

如何使bootstrap 3导航栏不包装

3 个答案: