html - 滚动 Bootstrap 3 时保持导航栏宽度相同

Question

我正在使用nav-bar在我的页面上使用以下代码

<nav class="navbar navbar-default navbar-lower" role="navigation">
            <div class="container">
                <div class="container collapse navbar-collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>

                    </ul>

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

它工作得很好，就像我想要的那样，除了它的 width当我滚动时。 我希望它的宽度与我的 body 的宽度相同该页面上的标签，但当我滚动时，它会添加一些额外的 width在右侧。 看下面的截图可以更清楚地理解

我尝试更改 container类并将其添加到 <nav class="container"...但这并不能解决问题。

Answer 1

这是一个 fiddle ，显示导航栏永远不会增加宽度 Fiddle

<div class="container">
    <div class="row">
       <nav class="navbar navbar-default  navbar-lower" role="navigation">
            <div class="container">
                <div class="container collapse navbar-collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>

                    </ul>

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

如果你想增加宽度，你需要执行以下操作

滚动时需要添加类

将原始导航类设置为有边距并将其设置在容器之外，然后将滚动设置为没有边距

       <nav class="navbar navbar-default  navbar-lower" role="navigation">
            <div class="container">
                <div class="container collapse navbar-collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>

                    </ul>

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

然后添加

<script>
$(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop() > 1);
});
</script>