Bootstrap 4 - 如何在導航欄中設置100％的搜索輸入寬度？

如何在導航欄中設置100％的搜索輸入寬度？Bootstrap 4 - 如何在導航欄中設置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>

這裏是小提琴：

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

來源

2016-09-30 Nikolay Lipovtsev

添加一些你希望我們爲你做什麼exaclty更多的細節？ –

尋求調試幫助的問題必須包含在問題本身中重現**所需的最短代碼。**注意：請不要濫用代碼塊來解決此問題**。 –

您可以使用text-truncate黑客的最後一個導航欄li這樣..

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

在自舉4，文本截斷將設置：

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（不黑客需要！）

截至Bootstrap 4導航欄是flexbox，因此創建全寬搜索輸入更容易。你可以簡單地使用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

來源

2016-09-30 13:01:50 ZimSystem

謝天謝地！正是我在找什麼 – codely

Bootstrap 4 - 如何在導航欄中設置100％的搜索輸入寬度？

回答

相關問題