Question

我的顶级固定可折叠自举导航栏有点麻烦。

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

我尝试删除所有我的JS，CSS和页面的其余部分，只留下导航栏，而且bug仍然存在，所以我认为它是关于该导航栏语法的。

以下是代码

<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中存在一个已知错误：

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应用＆＃34;折叠＆＃34;当菜单折叠时，然后＆＃34;在＆＃34;一旦崩溃完成。我希望这有助于其他人。

BUG：Bootstrap Fixed Collapsible Navbar

4 个答案: