Bootstrap 带有搜索栏的可折叠导航栏：form-inline 不能很好地调整大小

Question

(fiddle link: https://jsfiddle.net/xdo6u5p6/1/)

我很难将搜索栏放入我的 navbar-default 中，而不会在调整大小时完全弄乱格式。在桌面视图中，我的 header 看起来像这样：

现在，如果我要将 window 宽度调整得足够小（或转到移动设备）。 header 看起来像：

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

问题的根本原因是我的 form-inline，因为没有那个搜索栏，header 可以完美运行。我怎样才能让 header 将所有内容都放在一行中直到它折叠，然后将搜索栏正确对齐折叠的 window 中的某处？我最初的猜测是，将内联表单的 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网站上看到有同样的例子。请尝试将您的代码修改为以下内容，更改仅从表单元素中删除 class .form-inline 并添加另外 2 class .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>

Bootstrap 带有搜索栏的可折叠导航栏：form-inline 不能很好地调整大小

Bootstrap collapsible navbar with search bar: form-inline does not scale well with resizing

html

css

navbar

twitter-bootstrap