具有搜索栏的Bootstrap可折叠导航栏：form-inline在调整大小时无法很好地扩展

Question

（小提琴链接：https://jsfiddle.net/xdo6u5p6/1/）

我很难将搜索栏放入导航栏默认设置，而不会在调整大小时完全搞砸格式化。在桌面视图中，我的标题如下所示：

现在，如果我要调整窗口宽度足够小（或移动到移动设备）。标题如下：

搜索栏已将列表项踢到下一行，看起来很难看。更糟糕的是，如果我将其调整到菜单崩溃的程度：

问题的根本原因是我的form-inline，因为如果没有该搜索栏，标题就能完美运行。如何允许标题在一行上适应所有内容直到它崩溃，然后在折叠窗口的某处正确对齐搜索栏？我最初的猜测是，将表单的margin-left设置为70是问题的重要部分，但我不希望表单位于横幅旁边。这是html：

<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="../index.html" class="navbar-brand">Highli.ne</a>
    </div>
    <div class="collapse navbar-collapse" id="header">
      <form class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" id="search" placeholder="Search area or name" />
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="register.html">Register</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
</div>

和css：

/* header -- begin */
.navbar-default {
    z-index: 1;
    background-color: #2457af;
    border-radius: 0;
    border-style: none;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto 0 auto;
    padding: 10px 30px;
}

.navbar-header .navbar-brand,
.navbar-header .navbar-brand:hover {
    color: white;
    text-decoration: none;
    font-size: 36px;
}

.navbar-default .form-inline {
    display: inline-block;
    margin-top: 10px;
    margin-left: 100px;
}

.navbar-default .form-control {
    background-color: rgba(0,0,0,0.7);
    border-style: none;
    border-radius: 0;
    font-size: 16px;
    color: white;
}

.navbar-default .btn-default {
    border-radius: 0;
    display: inline;
    background-color: rgba(0,0,0,0);
    color: white;
}

.navbar-default .navbar-nav {
    list-style: none;
    display: inline-block;
}

.navbar-default .navbar-nav li {
    display: inline;
    padding: 0 10px;
}

.navbar-default .navbar-nav li a {
    color: white;
}

.navbar-default .navbar-nav li a:hover {
    color: white;
    text-decoration: underline;
}
/* header -- end */

Answer 1

我在Bootstrap网站上看到了相同的例子。请尝试将代码修改为以下内容，更改仅从表单元素中删除类.form-inline并添加另外两个类.navbar-form和.navbar-left

<form class="navbar-form navbar-left">
  <div class="form-group">
    <input type="text" class="form-control" id="search" placeholder="Search area or name" />
  </div>
</form>