由于引导代码而无法隐藏很长的菜单项

Question

我正在尝试使菜单项消失，然后再移至第二行，并且在调整浏览器大小时，一旦菜单项消失，就会弹出3栏菜单。 http://jsfiddle.net/qwwru7eh/

到目前为止，我已经尝试使用显示无显示和带有内嵌css样式标签的display：block通过媒体查询为它们设置样式：我将Bootstrap的问题隔离到以下代码，但是我无法通过样式设置来达到预期的效果：

@@ media（最小宽度：872px）{.navbar-toggle {显示：无； }}

@ media（最大宽度：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; 
}

[如果有人知道设置引导菜单项元素的最佳方法，请让我知道如何做，并为我提供样式化引导元素的最佳实践的建议。谢谢！

Answer 1

您有几个选择，第一个选择是减少可以使用此媒体查询进行的菜单项周围的填充：

@media (min-width: 768px) {
  .navbar-nav>li>a {
      padding:15px 10px;
  }
}

JSFiddle example

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

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

JSFiddle example

Answer 2

您只需要链接jquery。您的菜单将正常工作。我正在向您发送代码以及链接。如果有任何更改，请通知我。

http://jsfiddle.net/1w4o9780/

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;
		}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<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-->