如何在bootstrap 3.0中禁用响应式下拉导航条

Question

我想在引导中禁用导航栏的响应dropdown，就像桌面屏幕显示我一样。这是我的代码…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Link</a>
                        </li>			
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

我想禁用dropdown负责。这是我在jsfiddle中的代码:

http://jsfiddle.net/v5a7kj52/1/

Answer 1

我的问题解决了这个css:

@media (max-width: 768px) {
.navbar-header {
    float: left;
}
.navbar {
    border-radius: 4px;
    min-width: 293px;
}
.navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-collapse.in {
    overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}
.navbar-static-top {
    border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
    border-radius: 0;
}
.navbar-toggle {
    display: none;
}
.navbar-nav > li {
    float: left;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-nav.navbar-right:last-child {
    margin-right: -15px;
}
.navbar-left {
    float: left !important;
}
.navbar-right {
    float: right !important;
}
.navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
    float: none;
    margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
    top: 0;
}
.navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.navbar-form.navbar-right:last-child {
    margin-right: -15px;
}
.navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
}
.navbar-text.navbar-right:last-child {
    margin-right: 0;
}
.navbar-nav .open .dropdown-menu {
    position: absolute;
    -webkit-box-shadow: black;
    box-shadow: aliceblue;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #FFF;
    width: auto;
}
.navbar-nav {
    margin: 0;
}
.navbar-nav .open .yep-notify {
    right: 0;
    left: auto;
    width: 299px;
}

}

Answer 2

我相信我在导航栏下拉菜单中也遇到了同样的问题。在较小的屏幕上，当响应式菜单切换取代普通菜单时，下拉菜单感觉很尴尬。首先你必须打开菜单折叠，然后打开下拉菜单，这是相当糟糕的用户体验。

我想有尽可能简单和清晰的解决方案，所以我需要使用Bootstrap的响应实用程序来隐藏和显示选定的div取决于屏幕大小。缺点是你必须编写两次菜单项，但它也让你完全控制响应式菜单内容。

我知道你已经解决了你的问题，但这个选项可能对有类似问题的人有好处。

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a>
                </div>
                <div class="hidden-xs">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="visible-xs hidden-sm hidden-md hidden-lg">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>