由于Bootstrap代码，无法隐藏很长的菜单项

我正在尝试使菜单项消失，然后再切换到第二行，并在菜单项消失时立即弹出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; 显示：无; 宽度：自动; 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;
  }
}

JSFiddle示例

另一个选项，如果你不想改变填充，将减少字体大小：

body { 
  padding-top: 51px;
  font-size:13px;
}

JSFiddle示例

链接地址: http://www.djcxy.com/p/83679.html

上一篇: Unable to hide very long menu items due to Bootstrap Code

下一篇: Collapse all ULs other than the clicked one and its parent ULs