Question

我正在使用bootstrap创建我的第一个网站（请参阅下面的代码）。我已将navbar-fixed-top类添加到我的页面，以便在向下滚动时使导航栏粘到顶部。但相反，这个类完全禁用向下滚动页面的可能性。简单的是，右侧没有垂直滚动条可见。这背后的原因是什么？如何解决这个问题？

提前致谢！

Stijn

<nav class="navbar-wrapper navbar-fixed-top" role="navigation">
<div class="custom-nav">
  <div class="container">
        <div class="col-md-10 col-md-offset-1">

          <div class="navbar-header">
              <a class="navbar-brand" href="#">Logo</a>
          </div>
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">1</a><li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li class="navbarpadding"><form action="#">
                            <button class="btn btn-default btn-primary navbar-btn">Apply</button>
                    </li>
                </ul>
            </div>
        </div>
   </div>

Answer 1

轻松修复。您未正确关闭代码。确保在打开标签时关闭标签，否则您将遇到此问题。这就是你的HTML应该是这样的：

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="custom-nav">
        <div class="container">
            <div class="col-md-10 col-md-offset-1">
                <div class="navbar-header"> <a class="navbar-brand" href="#">Logo</a>

                </div>
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">1</a>

                            </li>
                            <li><a href="#">2</a>

                            </li>
                            <li><a href="#">3</a>

                            </li>
                            <li><a href="#">4</a>

                            </li>
                            <li><a href="#">5</a>

                            </li>
                            <li class="navbarpadding">
                                <form action="#">
                                    <button class="btn btn-default btn-primary navbar-btn">Apply</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<强>摘要

您没有关闭表单标记，li标记，多个div标记和nav标记。每当你在文档的“正文”中放置某些东西时，它仍然会认为它是导航栏的一部分，然后它就不会渲染它。下次关闭你的标签:)我还在一个例子下面留下了一个JSFiddle，告诉你这是唯一的问题。

<强> DEMO

navbar-fixed-top bootstrap类禁用页面上的垂直滚动。

1 个答案: