css - examples - Bootstrap 4: ¿cómo hacer una entrada de búsqueda de ancho 100% en Navbar?
navbar bootstrap 4 (1)
¿Cómo hacer un ancho del 100% de la entrada de búsqueda en la barra de navegación?
El campo está limitado en ancho:
<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>
Aquí está el violín:
Actualizado 2018
A partir de Bootstrap 4, la barra de navegación es flexbox, por lo que es más fácil crear una entrada de búsqueda de ancho completo. Simplemente puede usar las clases de utilidad w-100 y d-inline :
<form class="mx-2 my-auto d-inline w-100">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
http://www.codeply.com/go/sbfCXYgqoO
Bootstrap 3 (respuesta original)
Puede usar el truco de text-truncate en la última barra de navegación como esta.
<li class="text-truncate">
<form class="input-group">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<div class="input-group-btn">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
En Bootstrap 4, text-truncate establecerá:
overflow: hidden;
white-space: nowrap;
Esto permite que el formulario de búsqueda rellene el ancho restante y no se ajuste.
Demostración http://www.codeply.com/go/22naSu3c0E
Otra opción es usar table-cell :
<form>
<div class="table-cell"> </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>
</form>