Twitter bootstrap 如何在Bootstrap 3中扩展搜索栏以填充导航栏中的可用空间

我想在bootstrap 3中扩展导航栏的搜索栏，以使其填满可用空间（即我希望搜索栏从徽标转到“主页”）。我该怎么做

html:

切换导航
搜索栏

---

提前谢谢^-^

easyfix将使用

.navbar left

的宽度属性，并添加

.form组、.input组{
宽度：100%；
}

切换导航
搜索栏

easyfix将使用

.navbar left

的宽度属性，并添加

.form组、.input组{
宽度：100%；
}

切换导航
搜索栏

<!--  Navbar -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- Menu for mobile display -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Website logo -->
      <a class="navbar-brand" href="#"><img alt="Brand" src="res/common/img/logo.png"></a>
    </div>

    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <label for="search-bar" class="sr-only">Search bar</label>
        <div class="input-group">
          <input type="search" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
          </span>
        </div>
      </div>
    </form>

    <!-- Navbar content (collapsed in mobile view) -->
    <div id="navbar" class="navbar-collapse collapse">
      <!-- Float right -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <!-- Dropdown under profile name -->
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">John <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>