我试图让菜单项在移动到第二行之前消失,并在我调整浏览器大小时菜单项消失后立即弹出 3 栏菜单。 http://jsfiddle.net/qwwru7eh/
到目前为止,我已经尝试使用 display none 和 display:block 使用内联 css 样式标签通过媒体查询来设置它们的样式:
我将 Bootstrap 的问题与以下代码隔离开来,但是我无法通过设置它的样式来获得预期的效果:
@media (min-width: 872px) { .navbar-toggle { display: none; } }
@media (max-width: 871px) { .navbar-nav .open .dropdown-menu { position: static; float: none; display:none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } }
HTML:
<nav class="container-fluid navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<!--Logo!-->
<div class="navbar-header">
<a href="#" class="navbar-brand">THE LOGO</a>
<!--Toggle Button 3 Lines -->
<button type="button" class="navbar-toggle customtogglebtn" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!--Navigation Menu Items!-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>
<!--Dropdown Menu Item with Options!-->
<li class="dropdown">
<a href="dropdown" class="dropdown-toggle" data-toggle="dropdown">My Profile<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Friends</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">My Timeline</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li>
</ul>
<!--Right-Align Menu Items!-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<!--Page Content -->
<div class="container-fluid belowstatic" style="height:1000px; background:#333; bottom:0;">
静态导航栏
CSS:
body { padding-top: 51px;}
.navbar-toggle { outline:none; border:none; margin-right:-5px; background:none;}
.navbar-static-top {
top: 0;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
}
如果有人知道设置引导菜单项元素样式的最佳方式,请告诉我该怎么做,并建议我设置引导元素样式的最佳做法。谢谢!
最佳答案
你有几个选择,第一个是减少菜单项周围的填充,你可以用这个媒体查询来做:
@media (min-width: 768px) {
.navbar-nav>li>a {
padding:15px 10px;
}
}
如果您不想更改填充,另一种选择是减小字体大小:
body {
padding-top: 51px;
font-size:13px;
}
关于jquery - 由于 Bootstrap 代码,无法隐藏很长的菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35233122/