如何在中间使用全尺寸搜索表单制作 bootstrap 3 响应式导航栏？答案

【问题标题】：how to make bootstrap 3 responsive navbar with full sized search form in the middle?如何在中间使用全尺寸搜索表单制作 bootstrap 3 响应式导航栏？
【发布时间】：2018-10-27 09:14:47
【问题描述】：

我正在尝试创建一个导航栏，其中包含一个搜索表单，该表单将填充.navbar-brand 和.navbar-collapse 的内容之间的所有剩余空间。

当视口的宽度小于 767px 时（触发导航栏的折叠样式时），我的代码可以正常工作。但是当视口的宽度超过 767px 时，搜索表单变小了..

这是html：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <div class="navbar-search_container">
        <div class="full_width_div">
          <div class="right_part-wrapper">
            <a class="btn btn-default">z</a>
          </div>
          <div class="remaining-wrapper">
            <form class="my-search_form-group">
              <div class="input-group">
                <input type="text" class="form-control" name="q" placeholder="keyword">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    a
                  </button>
                </span>
              </div>
            </form> <!-- /.my-search_form-group -->
          </div> <!-- /.left_part-wrapper -->
        </div> <!-- /.full_width_div -->
      </div> <!-- /.navbar-search_container -->
    </div> <!-- /.navbar-header -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

这是css：

/* css to allow a div fit remaining width
   based on https://stackoverflow.com/a/5043876/1235167 */
.full_width_div {
  width: 100% !important;
}
.full_width_div > .right_part-wrapper {
  /* white-space: nowrap; */
  float: right;
}
.full_width_div > .left_part-wrapper {
  float: left;
}
.full_width_div > .remaining-wrapper {
  /* white-space: nowrap; */
  overflow: hidden;
}

这是jsfiddle

在修改开发者工具后，我发现我的代码仅适用于小于 767px 的视口，因为.navbar-header 在小于 767px 时会获得“宽度：100%”规则。所以现在我想我需要制作.navbar-search_container 部分来填充.navbar-collapse 的内容留下的剩余空间。我怎么做？他们在不同的DOM级别和结构上..请帮忙。我已经为此工作了好几天..

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

结合媒体查询设置最小宽度可能是一种选择：

@media (min-width: 768px) {
  .full_width_div {
    min-width: 500px;
  }
}

fiddle

【讨论】：

很遗憾，.navbar-collapse 中的项目可能会有所不同，所以我不能使用固定宽度..

【解决方案2】：

如果有人感兴趣，因为似乎没有人有任何可用的解决方案，所以我基本上放弃了这个问题，并使用了移动视图和桌面视图的两组搜索表单。

【讨论】：