Bootstarp 4 — как сделать search input в navbar во всю свободную ширину 100%?

Question

[Diesel-nick]

Привет!
Как в Bootstrap 4 сделать поле поиска в navbar во всю свободную ширину?

<nav class="navbar navbar-light navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>

  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <form class="form-inline ">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">User Name</a>
    </li>
  </ul>
</nav>

Поле ограничено в ширине - jsfiddle

Answer 1

[Diesel-nick]

Работает для Bootstrap 4 если добавить эти классы в css:

.table-cell {
    display: table-cell;
    vertical-align: middle;
}
.fill-width {
    width:100%;
}

Navbar:

<nav class="navbar navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav pull-xs-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>

  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <a class="nav-link" href="#">User Name</a>
    </li>
  </ul>
  <form>
        <div class="table-cell"> &nbsp; </div>
        <div class="table-cell fill-width">
            <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
        </div>
        <div class="table-cell">
            <button class="btn btn-outline-success" type="submit">Search</button> 
        </div>
         <div class="table-cell"> &nbsp; </div>
  </form>
</nav>

Answer 2

[Антон]

У вас есть разделение на левую и правую части в навигации.
Поле поиска находится правой части и не может сместить левую часть.

Копайте в этом направлении. Скорее всего вам нужно перенести поле поиска в левую часть, а затем растягивать его.

Comments

[Diesel-nick]

Дело видимо не в правом или левом расположении. попробовал перенести в левую часть, результат такой же https://jsfiddle.net/Dieselnick/9x0mz5oh/