navbar-fixed-top 引导类禁用页面上的垂直滚动。答案

【问题标题】：navbar-fixed-top bootstrap class disables vertical scrolling on page.navbar-fixed-top 引导类禁用页面上的垂直滚动。
【发布时间】：2014-07-09 04:38:16
【问题描述】：

我正在使用引导程序创建我的第一个网站（请参见下面的代码）。我已将 navbar-fixed-top 类添加到我的页面中，以便在向下滚动时使导航栏保持在顶部。但相反，这个类完全禁用了向下滚动页面的可能性。简单的右侧不再可见垂直滚动条。这可能是什么原因，我该如何解决？

提前致谢！

风格

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

【问题讨论】：

请让我知道下面的答案是否是修复。
是的，它解决了这个问题。我想我应该开始更有条理地工作，以避免将来出现这些问题。非常感谢您在这里帮助我！
如果你能检查出正确的答案，那就太棒了！

标签： twitter-bootstrap navbar

【解决方案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>

总结

您没有关闭您的 form 标签、一个 li 标签、几个 div 标签和您的 nav 标签。每当您在文档的“正文”中放入某些内容时，它仍然会认为它是导航栏的一部分，然后它不会呈现它。下次只需关闭您的标签 :) 我还在示例下方留下了一个 JSFiddle，以向您展示这是唯一的问题。

DEMO

【讨论】：