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

检查this question

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

根据您的需要更改1000px :) 祝你有愉快的一天

Bootstrap导航栏崩溃得太晚

1 个答案: