Bootstrap 3 - Wie Eingabebreite innerhalb navbar

Question

Gerade jetzt zu maximieren habe ich eine Navigationsleiste, die wie folgt aussieht: http://bootply.com/78239

ich die Breite der „Suche“ text-Eingabe Umbrüche Zeilen will maximieren, ohne die Schaffung (Das heißt, dass der Link "Löschen" eng mit dem Link "Über" verknüpft ist).

Ich habe nur grundlegende Erfahrung mit CSS und Web-Design. Ich habe etwas über "overflow: hidden" Tricks gelesen, aber ich verstehe nicht, wie man es benutzt, wenn sich rechts neben dem Zielelement mehr Elemente befinden.

Dank

---

EDIT:

Eine Teillösung, die Breite "von Hand" für jeden Fall, wie in http://bootply.com/78247 gesetzt werden kann:

@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; 
    } 
} 

aber diese Lösung nicht funktionieren, wenn die Texte des Menüs "dynamisch" sind (z. B. "Hello-Benutzername" enthalten).

Ich nehme an, es ist kein großes Problem, wenn Sie annehmen, dass die Breite der Textbreite des Menüs begrenzt ist - es ist einfach ärgerlich, diese Breiten manuell zu berechnen/zu testen. Ich bin nur neugierig zu wissen, ob es eine nette Möglichkeit ist, es automatisch zu tun.

Answer 1

Für Bootstrap-Version 3.2 oder höher sollten Sie auch die display:table; für die input-group eingestellt und die Breite auf 1% für die input-group-addon gesetzt.

<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-Version 3.2+: http://www.bootply.com/t7O3HSGlbc

-

Wenn Sie die Position Ihrer navbar Elemente zu ändern erlauben? Ich verstehe nicht, "ohne Zeilenumbrüche zu erstellen (d. H., Dass der Link" Löschen "eng mit dem Link" Über "verknüpft ist)." Versuchen Sie Folgendes: http://bootply.com/78374.

Was ich tat:

• den Schwimmer Tropfen Form links (durch die navbar-links-Klasse fallen)
• Geben Sie anderen navbar Elemente ein Recht Schwimmer (die navbar-rechts-Klasse)
• set Anzeige der form Gruppe inline (style="display:inline")
• ändern der Position der Elemente (die rechte schwebten erster)

Verwandte Frage:

• 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

Zwei Dinge hier für mich gearbeitet.Hinzufügen Orens Medienanfragen und auch ein display: inline zu dieser searchbar Form Gruppe hinzufügen:

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

Mit dem CSS:

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