बूटस्ट्रैप 4 - नौसेना में खोज इनपुट की 100% चौड़ाई कैसे बनाएं?

Question

नौसेना में खोज इनपुट की 100% चौड़ाई कैसे बनाएं?

क्षेत्र चौड़ाई में सीमित है:

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

Answer 1

आप पिछले नेवबार li इस तरह पर text-truncate हैक का उपयोग कर सकते हैं:

<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 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 में, पाठ truncate सेट हो जाएगा:

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

अद्यतन (कोई हैक्स जरूरत!)

बूटस्ट्रैप 4 के रूप में Navbar flexbox है इसलिए पूर्ण-चौड़ाई खोज इनपुट बनाना आसान है।

<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