Twitter Bootstrap：如何阻止类 .Collapse 导致导航栏元素在高分辨率下不可见？

Question

即使是从 getbootstrap.com 复制粘贴的代码也面临同样的问题。 这是我的自定义代码，可以在折叠菜单的移动分辨率下完美运行。但是当页面宽度超过 768px 时，“

's”就不会出现。 #navbarCollapse 不涉及自定义 CSS，它只是数据切换的选择器。

<header class="row">
        <div class="navbar" id="navigation" role="navigation">
            <div class="container">
                <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
                <a href="#" class="navbar-brand" style="font-family: 'open sans condensed'; font-size: 30px;">Name</a>
                <div id="navbarCollapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navmenu">
                    <li><a href="/">About</a></li><li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div> <!-- End of Navigation -->
                <div class="col-xs-12" id="banner">
                    <h1 class="bannertext">
                     Content <br> 
                    <button type="button"class="btn btn-primary">GET STARTED</button>
                    </h1>
                </div>
    </header><!-- End of header-->

Answer 1

我找到了一个使用 CSS 的快速解决方案：

由于菜单在max-width: 768px 下折叠，并且.Collapse 设置为display: none; 通过 id 选择 #navbarCollapse 会在折叠模式之外覆盖它是有道理的。如果你好奇，这里是代码：

/* Non-mobile features */
@media (min-width: 768px) {
#navbarCollapse {
  display: block;
}
}