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

檢查this question

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

更改1000像素根據您的需要:) 有一個愉快的一天