javascript - 使我的导航栏表单搜索字段全宽

Question

我有这个navbar在下面，我想将搜索字段设置为全宽，这样它就可以尽可能多地扩展导航栏，而不会挡住任何其他内容。

我该怎么做？

我尝试了几种不同的方法，例如设置不同元素的宽度，但似乎没有任何效果。

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" [routerLink]="['/home']">Web App</a>

    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false">        <span class="navbar-toggler-icon"></span>      </button>

    <div class="collapse navbar-collapse" id="test">
      <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/register']">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/login']">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

这可以通过 display:flex; 并将相关元素包装在 divs 中来实现。我将第一个和第二个 div 设置为 flex-shrink:1;，这意味着它们收缩到 div 的内容。然后我将 flex-grow: 1; 添加到第二个 div 以填充剩余空间。

我还在输入字段中添加了 width:100%;。

.flex {
  display:flex;
}
.flex > div {
  padding:0 5px;
  flex-shrink:1;
}
.flex > div:nth-child(2) {
  flex-grow: 1;
}
input {
  width:100%;
}
.collapse {
  display:none;
}

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <div class="container flex">
    <div>
      <a class="navbar-brand" [routerLink]="['/home']">Web App</a>
    </div>
    <div>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
    </div>
    <div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false">        <span class="navbar-toggler-icon">Menu</span>      </button>

      <div class="collapse navbar-collapse" id="test">
        <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/register']">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/login']">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>