ブートストラップ4 - navbarの検索入力の幅を100％にする方法は？

Question

navbarの検索入力の幅を100％にする方法は？

フィールドは、幅に制限されます。ここでは

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

はフィドルです：

あなたはこのように最後のナビゲーションバー liに text-truncateハックを使用することができます

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

Answer 1

..

ブートストラップ4では

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

、テキスト切り捨てが設定されます：

overflow: hidden; 
    white-space: nowrap; 

これは、残りの幅を記入してラップしないように検索フォームを可能にします。

デモhttp://www.codeply.com/go/22naSu3c0E

別のオプションは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（なしハックは必要ありません！）

ブーツストラップ4 Navbarはフレックスボックスなので、全幅の検索入力を作成する方が簡単です。あなたは、単にw-100と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