使用下拉列表引导不可折叠的导航栏
Bootstrap non collapsable navbar with dropdowns
我正在尝试创建没有响应的导航栏,并且有一些下拉菜单
我能够通过下面的 css 使其无响应。但是,如果我单击移动设备导航栏中的下拉菜单,它就会搞砸。这里是引导 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>
相关文章:
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 只使用CSS创建可折叠菜单或spry菜单
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- QML中的可折叠面板
- 可折叠容器/柱.添加多个链接
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 如何防止我的引导可折叠框滚动页面
- 如何以可扩展和可折叠的树形结构显示XML模式
- 单击一个后自动折叠所有其他可折叠内容
- 可折叠侧边栏/导航菜单
- Bootstrap手风琴/可折叠不适用于ul/li导航
- 引导可折叠导航栏不会折叠
- 多级可折叠引导侧导航菜单出现问题
- 引导程序可折叠导航未折叠
- 带子菜单的类似Mac的可折叠边栏导航
- 引导程序可折叠嵌套导航jquery应用于多个目标
- 在引导可折叠侧边栏导航中添加Cookie
- 可折叠导航栏
- 引导可折叠导航不工作