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

【问题标题】：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; 
}

如果有人知道设置引导菜单项元素样式的最佳方法，请告诉我如何操作，并就设置引导元素样式的最佳做法向我提供建议。谢谢！

【问题讨论】：

我知道你的问题了。给我一些时间。我会做的。

标签： jquery html css twitter-bootstrap-3

【解决方案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>

【讨论】：