Html 引导导航栏崩溃太晚

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

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

全宽导航栏

半宽度-应已折叠，但搜索栏移动到新行上

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

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

切换导航










{%if context.hasadmin%}









{%endif%}
{%if context.hasdeveloper%}






{#


#}


{%endif%}


{%if不是context.hasuser%}

{%endif%}
{%if context.hasuser%}






{%endif%}

我假设我把我的课程搞混了/用错了/用错了方式，但我不知道！任何帮助都将不胜感激。

检查

根据您的需要更换1000px:） 祝你今天愉快检查

根据您的需要更换1000px:）

---

祝您度过愉快的一天

导航栏仅在特定浏览器宽度后才折叠。不在内容到达下一行后仅在特定浏览器宽度后折叠导航栏。不在内容到达下一行之后

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

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