如何实现Bootstrap 3响应式导航栏，中间搜索表单占满剩余空间？

我完全懂你的困扰——Bootstrap 3的导航栏在大屏下的浮动布局确实会让中间元素很难自动填充剩余空间。小屏时因为.navbar-header被设为100%宽度，你的布局能正常工作，但大屏下.navbar-header和.navbar-collapse分别左右浮动，中间的搜索容器被限制在.navbar-header里，自然没法扩展到两者之间的空间。

下面是具体的解决方案，我们通过调整结构+Flexbox布局来实现需求：

步骤1：调整HTML结构 #

把搜索容器从.navbar-header中移出来，放到.container-fluid的直接子元素层级，和.navbar-header、.navbar-collapse同级。这样三个元素处于同一层级，方便我们用Flexbox控制布局：

<!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://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 navbar-flex-container">
    <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>
    <!-- 把搜索容器移到这里，和navbar-header、navbar-collapse同级 -->
    <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>
        </div>
      </div>
    </div>
    <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>

步骤2：添加Flexbox布局CSS #

我们给.container-fluid添加Flex属性，让它的子元素在大屏下横向排列，并且让搜索容器自动填充剩余空间。同时保留小屏时的原有布局：

/* 大屏下的Flex布局 */
@media (min-width: 768px) {
  .navbar-flex-container {
    display: flex;
    align-items: center;
    width: 100%;
  }
  /* 让导航栏头部宽度固定（根据品牌文字调整） */
  .navbar-header {
    flex: 0 0 auto;
  }
  /* 搜索容器填充剩余空间 */
  .navbar-search_container {
    flex: 1 1 auto;
    padding: 0 15px; /* 给左右加些边距，避免贴边 */
  }
  /* 右侧折叠菜单宽度固定 */
  .navbar-collapse {
    flex: 0 0 auto;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* 保留你原来的搜索内部布局CSS并优化 */
.full_width_div {
  width: 100% !important;
  display: flex;
  align-items: center;
}
.full_width_div > .right_part-wrapper {
  flex: 0 0 auto;
}
.full_width_div > .remaining-wrapper {
  flex: 1 1 auto;
  margin-right: 10px; /* 和右侧按钮保持间距 */
}
.my-search_form-group {
  margin-bottom: 0; /* 去掉表单默认的margin-bottom，避免导航栏高度异常 */
}
.input-group {
  width: 100%; /* 让输入组占满父容器 */
}

方案说明 #

• Flex布局的优势：在大屏下，.container-fluid变成Flex容器，三个子元素（品牌、搜索、菜单）横向排列，通过flex属性控制各自的宽度：
  • .navbar-header和.navbar-collapse设为flex: 0 0 auto，保持自身宽度不伸缩；
  • .navbar-search_container设为flex: 1 1 auto，自动填充剩余空间。
• 小屏兼容：在屏幕宽度<768px时，Bootstrap的默认样式会让.navbar-header占满宽度，搜索容器自然也会占满，和原来的效果一致，不需要额外调整。
• 细节优化：去掉表单默认的margin-bottom，给搜索容器加左右内边距，让布局更美观。

这样修改后，不管是大屏还是小屏，搜索表单都能完美填充对应的剩余空间啦！

内容的提问来源于stack exchange，提问作者dapidmini