Bootstrap 导航栏折叠得太晚了

Question

我没有太多使用 Bootstrap 的经验，但我正在使用一个框架（Twig + HTML + Bootstrap），该框架为课程作业提供了默认主题，并且在围绕选项/搜索栏的响应式折叠移动导航栏元素后发生得太晚；即它不会在正确的窗口宽度处折叠，迫使搜索栏流到选项下方的新行上。

这里有一些图片可以更好地描述我的意思：

全宽导航栏

半宽 - 应该折叠但搜索栏移至新行

折叠的导航栏（进一步减小窗口宽度后）

..这是导航栏的标记（抱歉太长了）：

<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{base}}/">{{context.sitename}}</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a href="{{base}}/search?query=Authors">Authors</a></li>
            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Publications<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="{{base}}/search?query=Documents">Documents</a></li>
                        <li><a href="{{base}}/search?query=Data">Data</a></li>
                        <li><a href="{{base}}/search?query=Source+Code">Source Code</a></li>
                        <li><a href="{{base}}/search?query=Apps">Apps</a></li>
                    </ul>
                </li>
            {% if context.hasadmin %}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="{{base}}/admin/pages">Pages</a></li>
                        <li><a href="{{base}}/admin/users">Users</a></li>
                        <li><a href="{{base}}/admin/contexts">Contexts</a></li>
                        <li><a href="{{base}}/admin/roles">Roles</a></li>
                        <li><a href="{{base}}/admin/info">PHP Info</a></li>
                    </ul>
                </li>
            {% endif %}
            {% if context.hasdeveloper %}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Developer<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="{{base}}/devel/hack">Run Code</a></li>
                        <li><a href="{{base}}/devel/fail">Fail</a></li>
                        <li><a href="{{base}}/devel/throw">Throw</a></li>
                        <li><a href="{{base}}/devel/mail">Test mail</a></li>
{#
                        <li><a href="{{base}}/devel/errlog">View Error Log</a></li>
                        <li><a href="{{base}}/devel/clearlog">Clear Error Log</a></li>
#}
                    </ul>
                </li>
            {% endif %}
        </ul>

        <ul class="nav navbar-nav navbar-right">
            {% if not context.hasuser %}
                <li class="nav"><a href="{{base}}/login?page={{context.action}}">Login</a></li>
            {% endif %}
            {% if context.hasuser %}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user{% if context.hasadmin %} text-danger{% endif %}"></i><b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="{{base}}/profile/{{context.user.id}}">View Profile<i class="fa fa-user"></i></a></li>
                        <li><a href="{{base}}/logout">Logout<i class="fa fa-sign-out"></i></a></li>
                    </ul>
                </li>
            {% endif %}
        </ul>

        <form id="search" action="{{base}}/search" method="get" class="nav navbar-nav navbar-form navbar-right">
            <div class="form-group">
                <input id="query" type="text" class="form-control" placeholder="Search" name="query" required="required" value="{{query is defined ? query}}">
            </div>
            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
        </form>

    </div>
</div>

我假设我的课程混淆了/使用了错误的课程/以错误的方式，但我不知道！任何帮助将非常感激。

Answer 1

检查这个问题

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

根据您的需要更改 1000px :) 祝您有美好的一天