Question

我有一个使用“nav-bar”元素的自定义Bootstrap 3网站。一切都很好，花花公子。我调整了浏览器窗口的大小，bam，出现了一个按钮并点击它导致菜单以垂直方式显示。

第二天，我决定使用grunt-uncss压缩我的bootstrap.css，因为我有一个相当简单的网站，只使用提供的一小部分元素。工作得很好，没问题（从132.5 kB到10），直到我测试了我的响应式菜单。

单击按钮时，垂直菜单布局会短暂闪烁，然后立即消失。如果我快速闪电，我可以点击这些项目，他们会指引我到正确的页面。我猜它会闪烁半秒左右，然后，bam，它就消失了。

我将问题调试到bootstrap.css文件而不是我的自定义style.css中，因为用原始文件替换压缩文件会使我的菜单再次正常工作。

有谁知道bootstrap.css中的哪些元素导致这个？我尝试在压缩的css文件中粘贴一些包含“nav-bar”或“.nav-bar”的元素，但它不起作用。

以下是我在每个页面上编写的代码，并使用徽标（navbar-brand）创建导航栏：

   <div id="container">
    <div class="hidden-header"></div>
    <header class="clearfix">
        <div class="navbar navbar-default navbar-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="index.html"><img alt="Logo Puntzeven" src="images/layer3.png"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="active" href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="#">Extra</a>
                            <ul class="dropdown">
                                <li><a href="tabs.html">Tabs</a></li>
                                <li><a href="feedback.html">Feedback</a></li>
                            </ul>
                        </li>
                        <li>
                        </li>
                                <li><a href="tarieven.html">Tarieven</a></li>
                                <li><a href="about.html">Over ons</a></li>
                                <li><a href="services.html">Voorzieningen</a></li>
                                <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>

如果我在问题中要更加紧凑，我道歉，但我想确保人们完全明白我的所作所为。

如果可能的话，我宁愿不用正常的bootstrap.css替换正常的bootstrap.css。

Answer 1

<强> DEMO 你可以这样做

    <nav class="navbar navbar-inverse " role="navigation">
   <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">TutorialsPoint</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>

         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Extra <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">Tabs</a></li>
               <li><a href="#">Feedback</a></li>

              </ul>
         </li>
          <li><a href="tarieven.html">Tarieven</a></li>
                                <li><a href="about.html">Over ons</a></li>
                                <li><a href="services.html">Voorzieningen</a></li>
                                <li><a href="contact.html">Contact</a></li>
      </ul>
   </div>

</nav>

添加css

        .mypanel {
    height: 100px;
    overflow-y: scroll;
   }


.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

我没有复制您的内容，请替换您的内容..

Bootstrap 3响应式菜单消失

1 个答案: