我已经阅读了github上的bug报告,并且据说已经修复了,但是我无法做到。
https://github.com/twbs/bootstrap/issues/12738

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

我不知道为什么这不起作用。 我删除了所有自定义样式,仅使用了引导程序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

不要忘记现在检查结束标记,末端主体标记仍处于打开状态,标头标记也处于打开状态

对于固定导航栏:

<!-- 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

  ask by nattylite translate from so

未解决问题?本站智能推荐:

2回复

CSS / Javascript菜单固定位置问题(滚动时)

这是我的小提琴: https://jsfiddle.net/0sawc7vL/1/ 这就是问题所在: 菜单是完美的,因为现在。 唯一的问题是,当我有一个可以滚动的页面时。 子菜单(带有“仪表板”链接等)保持在原位,因为它是固定的。 当我删除“ position = fi
1回复

网站固定菜单栏

好的,我一直在为自己创建一个视差滚动网站,但我想不出要制作固定菜单栏的方法。 我希望菜单栏在网站下方显示2/3部分,并且当用户滚动到该页面上方时,我希望它在向下滚动页面的其余部分时固定在页面顶部。 抱歉,如果我的术语很糟糕,是否可以帮助我希望菜单栏的功能与本网页上的功能完全相同。
2回复

我想把菜单固定在最上面

我的菜单是隐藏/显示的,但是我想在滚动时将其保留在页面顶部。 HTML: CSS: 和JS: 我想将箭头放在顶部,然后单击将其向下移动,并将菜单移到顶部,在关闭菜单后,箭头将返回其初始位置。 访问菜单codepen: 此处 尝试访问我的页面: 此处
1回复

滚动时单击事件后,活动菜单项不会更改其类别

我在固定菜单上遇到了问题。 当我滚动页面时,菜单的活动类别将根据当前部分而变化-固定菜单的高度,但是当我单击菜单中的链接时,活动类别将被添加到该链接中,但滚动页面不会更改其类别直到我刷新页面。 <div class="menu-area"> <div class="me
1回复

隐藏溢出时固定元素中的链接不起作用

这是我的简化问题: https : //jsfiddle.net/44sjaq1q/2 我使用隐藏在z-index:-1 position:fixed的固定底部菜单,并随滚动显示。 但是,菜单中的链接不起作用。 在我的页面中,我使用创建x滚动的元素,但是我使用了overflow-x
3回复

固定菜单位置,身高100%

我真的不明白为什么我的例子不起作用,但像bootstrap这样的东西完美无缺。 http://fiddle.jshell.net/QVmjd/2/ 为什么我的100%身高超过100%? 在http://getbootstrap.com/examples/navbar-fixed-
1回复

Bootstrap模态在滚动时不会保持固定

我在网站和一页上使用snap.js,默认情况下具有固定位置的Bootstrap模式。 但是,我相信由于该模式位于.snap-content容器中,该容器具有绝对位置,因此该模式不会保持固定状态,而是会与页面的其余部分一起滚动。 有什么建议么?
5回复

如何使SB管理员置顶并修复菜单

我想将菜单设置为顶部并针对SB Admin进行修复, 这里的模板。 http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html 我尝试了以下导航栏, 使用此功能时,页面底部会添加一个