Bootstrap 3 - Jak zwiększyć szerokość wejścia wewnątrz paska nawigacyjnego

Question

Teraz mam pasek nawigacyjny, który wygląda tak: http://bootply.com/78239

Chcę zwiększyć szerokość „Szukaj” text-wejście, bez tworzenia łamanie wierszy (tzn. że link "Wyczyść" będzie ścisły z linkiem "Informacje").

Mam tylko podstawowe doświadczenie z css i projektowania stron internetowych. Przeczytałem coś o "trikach" overflow: hidden ", ale nie rozumiem, jak z niego korzystać, gdy na prawo od elementu docelowego znajduje się więcej elementów.

Dzięki

---

Edycja:

Częściowym rozwiązaniem może być określenie szerokości "ręcznie" w każdym przypadku, tak jak w http://bootply.com/78247:

@media (max-width: 767px) { 
    #searchbar > .navbar-form { 
    width: 100%; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    #searchbar > .navbar-form { 
    width: 205px; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    #searchbar > .navbar-form { 
    width: 425px; 
    } 
} 

@media (min-width: 1200px) { 
    #searchbar > .navbar-form { 
    width: 625px; 
    } 
} 

ale rozwiązanie to nie będzie działają, gdy teksty menu są "dynamiczne" (na przykład zawierają "Hello nazwa użytkownika").

Przypuszczam, że to nie jest duży problem, jeśli założymy, że istnieje ograniczenie szerokości tekstów menu - po prostu irytujące jest ręczne obliczanie/testowanie szerokości. Po prostu ciekawi mnie, czy jest to dobry sposób na zrobienie tego automatycznie.

Answer 1

Dla Bootstrap wersji 3.2 i up należy również ustawić display:table; dla input-group i ustawić szerokość do 1% dla input-group-addon.

<div style="display:table;" class="input-group"> 
      <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
      <input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control"> 
      </div> 

Demo Bootstrap wersja 3.2 lub nowszym: http://www.bootply.com/t7O3HSGlbc

-

Jeśli pozwolisz zmianę położenia swoimi elementami NavBar? Nie rozumiem "bez tworzenia podziałów linii (tzn. Że link" Wyczyść "będzie ściśle powiązany z linkiem" Informacje ")." Wypróbuj to: http://bootply.com/78374.

co zrobiłem:

• Rzuć pływaka lewo od formy (przez upuszczenie klasę NavBar lewej)
• Daj innych elementów NavBar prawy pływak (klasę NavBar-prawy)
• Ustaw wyświetlanie formularzy do grupy inline (style="display:inline")
• zmienić położenie elementów (prawo płynął pierwszy)

pokrewne pytanie:

• Expand div to max width when float:left is set

html:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">My Project</a> 
    </div> 
    <div class="navbar-collapse collapse" id="searchbar"> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="about.html">About</a></li> 
     <li id="userPage"> 
      <a href="#@userpage"><i class="icon-user"></i> My Page</a> 
     </li> 
     <li><a href="#logout" data-prevent="">Logout</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" title="Start a new search">Clear</a></li> 
     </ul> 



    <form class="navbar-form"> 
     <div class="form-group" style="display:inline;"> 
      <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
      <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
      </div> 
     </div> 
     </form> 

    </div><!--/.nav-collapse --> 
    </div> 
</div> 

Answer 2

dwie rzeczy pracował dla mnie tutaj.Dodawanie orenów zapytań multimedialnych, a także dodanie display: inline do tej grupy formularza searchbar:

<li id="searchbar"> 
      <form id="search_form" class="navbar-form navbar-left navbar-input-group " role="search"> 
      <div class="input-group"> 
       <div class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">All <span class="caret"></span> 
       </button> 
       </div> 
       <div class="form-group"> 
       <input name="search_input" type="text" class="form-control typeahead" placeholder="Search for items or shops" autofocus="autofocus"> 
       </div> 
       <span class="input-group-btn"> 
      <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> 
      </button> 
      </span> 
      </div> 
      </form> 
     </li> 

Dzięki CSS:

#search_form > .input-group > .form-group { 
    display: inline; 
}