带有下拉菜单的Bootstrap不可折叠导航栏

Vishnu 发表于 Dev

毗湿奴

我正在尝试创建没有响应并且有一些下拉列表的导航栏

我可以通过下面的css使它无响应。但是，如果我单击移动中导航栏中的下拉菜单，就会搞砸了。这是bootply http://www.bootply.com/k9wnO3WaO4，尝试移动视图并单击todo重现此问题。

<style>
.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}


.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}
</style>

样本下拉

<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
                </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a></li>
                        <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a></li>
                        <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                            design</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a></li>
                    </ul>
                </li>

一只狼

我认为您不喜欢这种行为，其中有一个媒体查询。

它在css中执行以下媒体查询：

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
         background-color: transparent;
         border: 0 none;
         box-shadow: none;
         float: none;
         margin-top: 0;
         position: static;
         width: auto;
    }
...
}

只需重写以下CSS中的样式即可：

.navbar-nav .open .dropdown-menu {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}

您可以在此处找到更新的Bootply 。

在下面的演示中，我必须添加!important背景色。不知道为什么，因为不需要Bootply。

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}


.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}

.navbar-nav .open .dropdown-menu {
	background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    position: static;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation">
  <div class="container">

<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown"><span class="fa fa-bell"></span> <span class="label label-success">0</span></a>

</li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Chat <span class="fa fa-comment"></span>
                </a>
                    
                </li>
                <li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
                </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a></li>
                        <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a></li>
                        <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                            design</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a></li>
                    </ul>
                </li>
</ul>

<ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-user"></span> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Profile</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-off"></span>Logout</a></li>
                    </ul>
                </li>
            </ul>
</div>
</nav>