Сделав мою форму поиска в панели навигации полной шириной

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>

Answer 2

Добавить с и плавать на элементе ниже:

<ul class="navbar-nav mr-auto">

CSS:

width: 100px;
float: right;

Установленное вами значение с плавающей точкой не работает, поскольку ширина элемента составляет 100%. Вы также можете установить text-align: center, но зависит от того, как вы хотите, чтобы ваш текст начинался.

Чтобы правильно выровнять его, используйте margin-right и margin-left, чтобы отобразить его там, где вы хотите.

Edit: Чтобы иметь панель поиска полной ширины:

form, input {
  width: 100%;
}

Редактировать 2:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
	<div class="container">
		<div class="row w-100">
			<a class="col-2 navbar-brand" [routerLink]="['/home']" style="max-width:100px">Web App</a>

			<form class="col form-inline">
				<input class="form-control mr-sm-2 w-100" type="search" placeholder="Search" aria-label="Search">
      </form>
      
      <button class="col-1 navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false" style="min-width:50px">        
        <span class="navbar-toggler-icon"></span>      
      </button>      
      
      <div class="col-1 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>