wake-up-neo.net

Bootstrap 3 - So maximieren Sie die Eingabebreite in der Navigationsleiste

Im Moment habe ich eine Navigationsleiste, die wie folgt aussieht: http://bootply.com/78239

Ich möchte die Breite der Texteingabe "Suche" maximieren, ohne Zeilenumbrüche zu erstellen (d. H. Der Link "Löschen" wird eng mit dem Link "About").

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

Vielen Dank


BEARBEITEN:

Eine Teillösung kann darin bestehen, die Breite für jeden Fall "manuell" einzustellen, wie in 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;
  }
}

diese Lösung funktioniert jedoch nicht, wenn die Texte des Menüs "dynamisch" sind (z. B. "Hallo Benutzername").

Ich nehme an, es ist kein großes Problem, wenn Sie davon ausgehen, dass die Breite des Menüs begrenzt ist - es ist nur ärgerlich, diese Breiten manuell zu berechnen/zu testen ... Ich bin nur neugierig, ob es einen ordentlichen Weg gibt mach es automatisch.

21
Oren

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

<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 ändern dürfen? Ich verstehe nicht "ohne Zeilenumbrüche zu erstellen (d. H., Dass der Link" Löschen "eng mit dem Link" About "verbunden ist)." Versuchen Sie Folgendes: http://bootply.com/78374 .

Was ich getan habe:

  • Lassen Sie den Float links vom Formular fallen (indem Sie die Navbar-Left-Klasse löschen).
  • Geben Sie anderen Navbar-Elementen einen rechten Schwebekörper (die Navbar-Right-Klasse).
  • Anzeige der Formulargruppe auf Inline setzen (style="display:inline")
  • Ändern Sie die Position der Elemente (zuerst rechts geschoben)

Verwandte Frage:

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>
39
Bass Jobsen

Zwei Dinge haben hier für mich funktioniert. Hinzufügen von Orens-Medienabfragen und Hinzufügen eines display: inline zu dieser Suchleisten-Formulargruppe:

<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 der css:

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