Css 防止导航栏过早缠绕

我的Bootstrap3.3.0NavBar被包装成两行，显然是在宽度小于@screen md时，尽管左右之间有足够的空间可供收缩/使用。如何更改它，使其不会过早包装

我已经看到一些问题，询问如何更改断点以折叠成单个列。我不是在问这个问题，因为我的崩溃被设置为@screen sm，我对此没有意见

就在包裹之前。我甚至可以在右边插入另一个元素，它不会引起任何问题。

紧接着：

这是我的HTML：

<header class="navbar navbar-default navbar-static-top bs-docs-nav" id="top" role="banner">
  <form ...>
  <div class="container">
    <div class="navbar-header">
      ...
    </div>
    <nav id="mm-navbar" class="collapse navbar-collapse">
        <!-- Free-text Search --> 
        <div class="text-search input-group">
            <input id="search-input" type="text" class="form-control"
                placeholder="Search" name="q"  value="{{ query }}" />
            <span class="input-group-btn">
              ...
            </span>
        </div><!-- /text search -->

        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
               ...
            </li>
            <li><a href="{% url 'wizard' %}">Calculate</a></li>
            <li class="dropdown">
               ...
            </li>

            <li> <a id="login_button" href="{% url 'account_login' %}">Login</a> </li>
            <li>
                <span class="fa feedback-button fa-envelope" data-toggle="modal" 
                    data-target="#feedback-modal" title="Send Feedback"></span>
            </li>
            <li>
                <span class="help-button glyphicon help glyphicon-question-sign" data-toggle="modal" 
                    data-target="#help-modal" title="Help"/>
            </li>
            </ul>
        <!-- Advanced Search --> 
        <div class="collapse" id="advanced-search-bar">
            {% include "search.html" %}
        </div>
    </nav>
  </div>
  </form>
</header>

...
...


...



...







{%include“search.html”%}

---

似乎相关，但

向左拉

和

向右拉

对我不起作用。

注意<992px处引入的包裹（从屏幕md移动到屏幕sm），伴随着破损导航条两侧的大量边距（上图2）。问题是，整个导航栏被包装在

.container

中，该容器在此断点处设置了导航栏无法再容纳的固定宽度

---

解决方案是使用

.container fluid

（或者不使用容器，尽管我不确定其后果）。

您必须像这样更改导航栏断点：您能解释折叠断点（您的示例标题为）和包裹断点之间的关系吗？谢谢