设置bootstrap nav断点以在ipad肖像上显示移动导航
无法在iPad纵向和向下设置bootstrap导航和子导航的断点。我需要导航来在iPad上显示移动版本的肖像和iPhone的肖像和风景，但目前仍然坚持在iPad上显示桌面子导航：
所以它应该在iPad上看起来像这样：
它适用于这里的小提琴：jsfiddle link，虽然直到768px才会发生崩溃。但是，在我的代码中，我无法让它工作。
HTML：
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ABOUT US <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">WHAT WE DO<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-4 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Link & Link</a></li>
<li><a href="#">Link & Link</a></li>
<li><a href="#">Longer link title</a></li>
<li><a href="#">Longer link title</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li><a href="#">long link title</a></li>
<li><a href="#">long link title</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Really long link title</a></li>
<li><a href="#">Longer link title</a></li>
<li><a href="#">Link title here</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">OUR RESULTS <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle">NEWS</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle">LOCATIONS</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
CSS：
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width: 800px;
}
@media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
.icon-bar{
background-color: #000;
}
}
2 个答案:
答案 0 :(得分：0)
我做了什么，我不知道你使用4列无关紧要因为我改变了它们LG 4 XS 12改变了到750的小时
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ABOUT US <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">WHAT WE DO<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-md-4 col-xs-12 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Link & Link</a></li>
<li><a href="#">Link & Link</a></li>
<li><a href="#">Longer link title</a></li>
<li><a href="#">Longer link title</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li><a href="#">long link title</a></li>
<li><a href="#">long link title</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Really long link title</a></li>
<li><a href="#">Longer link title</a></li>
<li><a href="#">Link title here</a></li>
<li class="dropdown-header spacer">LINK</li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
<li><a href="#">Long link title</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">OUR RESULTS <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle">NEWS</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle">LOCATIONS</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
CSS
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width:750px;
}
@media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
@media (max-width: 967px) {
.navbar-header {
float: none;
}
.mega-dropdown-menu ul{
display: block;
position: relative;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
答案 1 :(得分：0)
我发现解决方案是设置一个新的断点：
@media (max-width: 800px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
将iPad肖像上的子导航与iPhone肖像相同。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？