如何让Bootstrap 4导航栏搜索框填满Logo与导航间的可用空间？

嘿，我看你在折腾Bootstrap 4的导航栏布局，想要让搜索框刚好填满Logo和右侧导航之间的所有可用空间，还得左右各留15px的间距对吧？目前宽屏设备上搜索框尺寸太小的问题，主要是因为没利用好Bootstrap的flex布局属性来分配空间，咱们来一步步调整：

核心修改思路 #

• 让导航栏的折叠容器启用flex布局，让内部的表单和导航列表能合理分配水平空间
• 给搜索表单设置flex: 1，让它占据Logo和导航之间的剩余空间，同时加上左右15px的margin
• 确保输入组和输入框的宽度是100%，保证搜索框能填满表单容器

修改后的完整代码 #

CSS部分（新增/调整的样式）

.navbar { 
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); 
  background: #191919; 
}
.navbar-inverse .navbar-nav a { text-transform: uppercase; }
.navbar-inverse .navbar-nav .nav-link { color: #fff; }
.navbar-inverse .navbar-nav .dropdown-menu { 
  padding: 0; 
  border-radius: 0; 
  top: 47px; 
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); 
}
.navbar-inverse .navbar-nav .dropdown-menu a { 
  padding: 11px 15px; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); 
  color: #757575; 
}
.navbar-inverse .navbar-nav .dropdown-menu a:hover { color: #555; }
.navbar-inverse .navbar-nav .dropdown-menu a:last-child { border-bottom: none; }
/* 新增和调整的核心样式 */
.navbar-inverse .form-inline { 
  display: flex;
  flex: 1;
  margin: 0 15px; /* 实现左右15px间距 */
}
.navbar-inverse .form-inline .input-group {
  width: 100%; /* 让输入组填满表单容器 */
}
.navbar-inverse .form-control.border-right-0 {
  width: calc(100% - 38px); /* 减去搜索图标容器宽度，避免重叠 */
}
.navbar-inverse .bg-white { 
  background: #fff; 
  border: none; 
  padding-top: 0; 
  padding-bottom: 0; 
  margin-top: 1px; 
  height: 37px; 
}
.navbar-inverse .btn-outline-secondary { 
  border: 1px solid #fff; 
  color: #fff; 
}
.navbar-inverse .btn-outline-secondary:hover { 
  background: #fff; 
  color: #0275D8; 
}
.container { margin-top: 56px; }

HTML部分（调整collapse容器的class）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-primary">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <!-- 给collapse容器添加d-flex类，启用flex布局 -->
  <div class="collapse navbar-collapse d-flex" id="navbarNav">
    <form class="form-inline">
      <div class="input-group">
        <input class="form-control border-right-0" placeholder="Search here...">
        <span class="input-group-addon bg-white border-left-0"><i class="fa fa-search"></i></span>
      </div>
    </form>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-folder-open" aria-hidden="true"></i> Categories</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Sports</a>
          <a class="dropdown-item" href="#">Hot</a>
          <a class="dropdown-item" href="#">Mad Science</a>
        </div>
      </li>
      <li>
        <a href="#" class="btn btn-outline-secondary"><i class="fa fa-user"></i> My account</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus mollitia, minima aliquam soluta ducimus sint obcaecati rerum inventore, ipsa nobis dignissimos, reiciendis, numquam cum sit cumque suscipit voluptatibus a est?</p>
</div>

各修改点的作用 #

1. d-flex加到navbar-collapse上：让容器内部的表单和导航列表使用flex布局，默认水平排列，为空间分配打下基础
2. flex:1给form-inline：让表单自动占据导航栏中Logo和右侧导航之间的所有剩余空间
3. margin:0 15px：直接给表单设置左右外边距，精准实现你要的15px间距
4. width:100%给input-group：确保输入组能填满表单容器，输入框自然也会跟着填满
5. width:calc(100% - 38px)给输入框：减去搜索图标容器的固定宽度，避免输入框和图标重叠，保证布局整齐

这样调整后，宽屏设备上搜索框就会自动填满中间的可用空间，左右保持15px的间距，移动端折叠导航后也能正常显示。

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