Bootstrap 4 - jak zrobić 100% szerokość wejścia wyszukiwania w pasku nawigacyjnym?

Question

Jak zrobić 100% szerokość wejścia wyszukiwania w pasku nawigacyjnym?

Pole jest ograniczona szerokość:

<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> 

Oto skrzypce:

https://jsfiddle.net/Dieselnick/tdoz2o4d/

Answer 1

Można użyć text-truncate siekać na ostatnim pasku nawigacyjnym li jak ta ..

<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>  

W Bootstrap 4 tekstu skróconego ustawi:

overflow: hidden; 
    white-space: nowrap; 

Umożliwia wyszukiwarki do wypełnienia pozostałą szerokość i nie opaska.

Demohttp://www.codeply.com/go/22naSu3c0E

Inną opcją jest użycie table-cell:

<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> 
</form> 

http://www.codeply.com/go/JdbPvotSXg

UPDATE (żadne hacki potrzebne!)

Od Bootstrap 4 pasek nawigacyjny jest więc stworzenie schematu flexbox pełnej szerokości wejścia wyszukiwania jest łatwiejsze. możesz po prostu użyć w-100 i d-inline użytkowych klasy:

<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