如何使Bootstrap 3导航栏不包裹 [英] How to make bootstrap 3 navbar not wrap

问题描述

我有一个引导程序3导航栏。

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

我需要什么CSS要实现这一目标？

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

解决方案

尝试一下。

  @media（最大宽度：1230px）{
 .navbar-header {
浮动：无； 
} 
 .navbar-left，.navbar-right {
 float：none！important; 
} 
 .navbar-toggle {
 display：block; 
} 
 .navbar-collapse {
 border-top：1px solid transparent; 
 box-shadow：嵌入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; 
保证金最高：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

I have a bootstrap 3 navbar.

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>

When the width of the window is full desktop size it is correct.

When the width of the window is smaller mobile phone size it correct.

In between these two sizes it wraps this menu as well as doubling the menu's height which I don't want.

I think my only option is probably to increase the mobile width to increase with inbetween widths so the navbar shows in mobile mode in the screenshot.

What css do I need to achieve this?

How do I force the right navbar <ul> to not be allowed to move below the left navbar <ul>?

解决方案

Try this...

@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;
}
}

From: http://www.bootply.com/120951

这篇关于如何使Bootstrap 3导航栏不包裹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！