Question

我的Bootstrap导航栏按钮在屏幕折叠时没有显示下拉链接时出现问题。

我有一个隐藏在崩溃的导航栏品牌，但自从我添加滚动导航插件后，我的链接不会显示在下拉列表中。这也是奇怪的是，如果页面低于顶部的级别，单击按钮只会向上滚动到顶部但我看不出冲突是什么。

这是一个小提琴：

我的HTML就像这样：

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">   
<div id="twitterbootstrap">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-inner">
            <div class="container">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                <a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
                        <li><a class="page-scroll" href="#page-top">Home</a></li>
                        <li><a class="page-scroll" href="#about">Link 1</a></li>
                        <li><a class="page-scroll" href="#services">Link 2</a></li>
                        <li><a class="page-scroll" href="#contact">Link 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>

<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>

任何想法都将不胜感激。

编辑：对我来说很复杂....不要笑我只是新的;）

Answer 1

bootstrap.css怎么样？

Try this one: http://jsfiddle.net/iboylmz/McHUc/41/

Answer 2

问题在于您的自定义CSS。在为.hidden-desktop添加的规则中，您添加了position: relative。我不确定为什么你需要相对位置，但它正在做的是捕获整个导航栏的点击事件。你可以通过在规则中添加pointer-events: none来看到这一点，它会神奇地起作用。

css中的pointer-events属性基本上表示允许鼠标穿透设计的图层并在某些较高层阻挡的事物上注册点击事件。虽然添加pointer-events: none可以在此处演示此问题，但它仅在版本11中支持IE，因此我建议删除position: relative属性。鉴于显示设置为无，我认为没有合理的原因可以设置位置。

.hidden-desktop {
    display: none !important;
    position:relative; /*remove this*/
}

这里有更新的小提琴：http://jsfiddle.net/jme11/m3m99fhr/7/。我现在在外部资源中链接了Bootstrap文件，以便您可以看到它在小提琴中工作。

Bootstrap下拉数据切换未在复杂的导航设置中显示

2 个答案: