由于引导代码，无法隐藏很长的菜单项
Posted
技术标签:
【中文标题】由于引导代码，无法隐藏很长的菜单项【英文标题】：Unable to hide very long menu items due to Bootstrap Code 【发布时间】：2016-05-15 23:02:10 【问题描述】：我试图在移动到第二行之前使菜单项消失，并在调整浏览器大小时使菜单项消失后立即弹出 3 栏菜单。 http://jsfiddle.net/qwwru7eh/
到目前为止，我已尝试使用 display none 和 display:block 与内联 css 样式标签为媒体查询设置样式：我将 Bootstrap 的问题隔离到以下代码，但我无法获得所需样式效果：
@media (最小宽度: 872px) .navbar-toggle 显示：无；
@media (max-width: 871px) .navbar-nav .open .dropdown-menu 位置：静态； 浮动：无；显示：无； 宽度：自动； 边距顶部：0； 背景颜色：透明； 边框：0； -webkit-box-shadow：无； 盒子阴影：无； .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header 填充：5px 15px 5px 25px； .navbar-nav .open .dropdown-menu > li > a 行高：20px； .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus 背景图像：无；
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;
如果有人知道设置引导菜单项元素样式的最佳方法，请告诉我如何操作，并就设置引导元素样式的最佳做法向我提供建议。谢谢！
【问题讨论】：
我知道你的问题了。给我一些时间。我会做的。 【参考方案1】：您有几个选择，第一个是减少菜单项周围的填充，您可以使用此媒体查询执行此操作：
@media (min-width: 768px)
.navbar-nav>li>a
padding:15px 10px;
JSFiddle example
如果您不想更改填充，另一种选择是减小字体大小：
body
padding-top: 51px;
font-size:13px;
JSFiddle example
【讨论】：
您说有几种选择。你应该告诉他们每个人的一些事情！ :) 谢谢，但如果我只想使用显示块并且在最大宽度：871 像素和最小宽度：872 像素附近不显示任何类型的解决方案，你能告诉我有什么选择吗？跨度> 【参考方案2】：你只需要链接jquery。您的菜单将正常工作。我正在向您发送代码和链接。如果有任何更改，请告诉我。
http://jsfiddle.net/1w4o9780/
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
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 (max-width: 991px)
.navbar-header
float: none;
.navbar-left,
.navbar-right
float: none !important;
.navbar-toggle
display: block;
.navbar-collapse
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
.navbar-fixed-top
top: 0;
border-width: 0 0 1px;
.navbar-collapse.collapse
display: none !important;
.navbar-nav
float: none !important;
margin-top: 7.5px;
.navbar-nav>li
float: none;
.navbar-nav>li>a
padding-top: 10px;
padding-bottom: 10px;
.collapse.in
display: block !important;
</style>
</head>
<body>
<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;">
<center>
<h1 style="color:#fff;">Static Navigationbar</h1>
</center>
</div>
<!--End container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>【讨论】：
以上是关于由于引导代码，无法隐藏很长的菜单项的主要内容，如果未能解决你的问题，请参考以下文章