固定菜单引导程序不滚动

时间:2015-03-30 21:54:05

标签: twitter-bootstrap scroll menu fixed

我已经阅读了github上的错误报告,它应该已修复,但我不能让我这样做。
https://github.com/twbs/bootstrap/issues/12738

我还将代码与实际演示进行了比较 http://getbootstrap.com/examples/navbar-fixed-top/

我无法弄清楚为什么这不起作用。我删除了所有自定义样式,只是bootstrap 3.3.4

如果您需要更多信息,请告诉我

<body>
<header>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button data-target="#menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">BRAND</a>
        </div>
        <div class="navbar-collapse collapse" id="menu" style="height: 1px;">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">Home2</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                        fasdfasdf
                    </a>
                    <ul class="dropdown-menu dropdown-menu">
                        <li>asdf</li>
                        <li>asdf</li>
                        <li>asdf</li>
                        <li>asdf</li>
                    </ul>
                </li>
                <li>Report</li>
            </ul>
        </div>
    </div>
</nav>
</header>
</body>

1 个答案:

答案 0 :(得分:0)

现在不要忘记检查你的结束标签,结束身体标签仍然是开放的,标题标签也是如此

for fixed-navbar:

<!-- Fixed Navbar -->
<header>
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button data-target="#menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">BRAND</a>
            </div>
            <div class="navbar-collapse collapse" id="menu" style="height: 1px;">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home2</a></li>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                            fasdfasdf
                        </a>
                        <ul class="dropdown-menu dropdown-menu">
                            <li><a href="#">asdf</a></li>
                            <li><a href="#">asdf</a></li>
                            <li><a href="#">asdf</a></li>
                            <li><a href="#">asdf</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Report</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

对于静态导航栏:

<!-- Static Navbar -->
<header>
    <nav role="navigation" class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button data-target="#menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">BRAND</a>
            </div>
            <div class="navbar-collapse collapse" id="menu" style="height: 1px;">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home2</a></li>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                            fasdfasdf
                        </a>
                        <ul class="dropdown-menu dropdown-menu">
                            <li><a href="#">asdf</a></li>
                            <li><a href="#">asdf</a></li>
                            <li><a href="#">asdf</a></li>
                            <li><a href="#">asdf</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Report</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

请参阅JSFIDDLE