BUG：引导固定可折叠导航栏

Question

我的顶部固定可折叠引导导航栏有点问题。

每当我单击导航栏的链接时，导航栏上方会出现一个看起来像水平滚动条的奇怪水平条，然后立即消失。

我尝试删除我所有的 JS 、 CSS 和页面的其余部分，只留下导航栏，但错误仍然存​​在，所以我认为它与导航栏的语法有关。

下面是代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.php">My Web</a>
                </div>
                <div>
                    <div class="collapse navbar-collapse" id="navbar">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#topBanner" data-toggle="collapse" data-target=".navbar-collapse">Home</a></li>
                            <li><a href="#proyecto" data-toggle="collapse" data-target=".navbar-collapse">Proyecto</a></li>
                            <li><a href="#masInfoContainer" data-toggle="collapse" data-target=".navbar-collapse">Galer&iacute;a</a></li>
                            <li><a href="#planosContainer" data-toggle="collapse" data-target=".navbar-collapse">Planos</a></li>
                            <li><a href="#mapContainerContainer" data-toggle="collapse" data-target=".navbar-collapse">Ubicaci&oacute;n</a></li>
                            <li><a href="#contacto" data-toggle="collapse" data-target=".navbar-collapse">Contacto</a></li>
                        </ul>
                        <ul class="nav navbar-nav">
                            <li style="font-size:12px"><a>(0000) 4444-4444</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

另外，在这个导航栏上，bootstrap scrollspy 不适合我。我想这可能是同一个问题。

非常感谢您的帮助

编辑：我发现问题在于使导航栏可折叠。如果我从 li 元素中删除数据属性，这个问题就消失了，但是在移动设备上，当我触摸某个链接时，导航栏不会倒塌。

Answer 1

根据这篇文章，引导程序中有一个已知错误：

Bootstrap 3 nav dropdown

你必须添加一些 CSS 来修复它：

.navbar-collapse.in {
    overflow-y: visible;
}

Answer 2

这是一个演示页面，您需要根据需要进行修改。DEMO Page

HTML 部分

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <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="#">My Application</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
 <li><a href="#itemss-list">Home</a></li>
                 <li><a href="#itemss-list">Home</a></li>
                 <li><a href="#itemss-list">Home</a></li>


            </ul></div>
    </div></nav>

Answer 3

我找到了解决问题的方法。

解决方案是将 .in 类添加到导航栏上 li 元素的 data-target 属性中。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="index.php">My Web</a>
        </div>
        <div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav navbar-right">
                    <li data-toggle="collapse" data-target="#navbar.in"><a href="#topBanner">Home</a></li>
                    <li data-toggle="collapse" data-target="#navbar.in"><a href="#proyecto">Proyecto</a></li>
                    <li data-toggle="collapse" data-target="#navbar.in"><a href="#masInfoContainer">Galer&iacute;a</a></li>
                    <li data-toggle="collapse" data-target="#navbar.in"><a href="#planosContainer">Planos</a></li>
                    <li data-toggle="collapse" data-target="#navbar.in"><a href="#mapContainerContainer">Ubicaci&oacute;n</a></li>
                    <li data-toggle="collapse" data-target="#navbar.in"><a href="#contacto">Contacto</a></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li style="font-size:12px"><a>(54+11) 4444-4444</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Answer 4

Maxime Mettley 的评论很有帮助。谢谢你。但由于我在折叠活动期间看到滚动条，我需要像这样修复它：

.navbar-collapse.in, .navbar-collapse.collapsing {
    overflow-y: visible;
}

Bootstrap 在菜单折叠时应用“折叠”类，然后在折叠完成后应用“折叠”类。我希望这对其他人有帮助。