webentwicklung-frage-antwort-db.com.de

Bootstrap 4 Inlineform in voller Breite

Ich habe ein Inline-Formular mit einer Suchleiste und einer Suchschaltfläche daneben. Wie kann ich erzwingen, dass input-group div sich über die gesamte Spalte in Bootstrap 4 erstreckt und vorzugsweise ohne benutzerdefiniertes CSS?

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span> 
        </div>
      </form>
    </div>
  </div>
</div>
12
migu

Aktualisiert 2018

Entfernen Sie den form-inline ..

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form action="" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span> 
        </div>
      </form>
    </div>
  </div>
</div>

Demo: http://www.codeply.com/go/4eu7w6KPkT

Eine weitere Option - Eingabe in voller Breite, die auf xs vertikal gestapelt wird: 

<div class="row">
        <div class="col-md-12">
            <form class="row">
                <div class="col-12 col-sm pr-sm-0">
                    <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
                </div>
                <div class="col-12 col-sm-auto pl-sm-0">
                    <input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
                </div>
            </form>
        </div>
</div>

Demo

13
Zim

Sie haben drei Möglichkeiten, die folgenden zwei Layoutoptionen zu implementieren:

Bootstrap 4 full-width search form options

Siehe mein Codeply.com, das alle unten aufgeführten Lösungen demonstriert ...


Vollbreites Suchformular mit Sticky-Button

Fügen Sie einfach Klasse flex-fill zu Ihrem <div class="form-group"> hinzu.

Beachten Sie bitte, dass sich Bootstrap 4 von input-group-btn in input-group-append geändert hat, um die Schaltfläche bei der Standardeinstellung zu bleiben Stichwortfeld und die abgerundeten Ecken richtig behandeln.

Schließlich habe ich ein aria-label -Attribut hinzugefügt, um die Barrierefreiheitsanforderungen für Ihr Beispiel zu erfüllen.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group flex-fill">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with sticky button" class="form-control" aria-label="Search this site">
          <div class="input-group-append">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </div> 
        </div>
      </form>
    </div>
  </div>
</div>




Vollbreites Suchformular mit getrennt Button ohne Wrapper div

Für diese Lösung haben Sie zwei Möglichkeiten, abhängig von Ihrer gewünschten HTML-Struktur und den Anforderungen des Projekts.

Zunächst können Sie alle Wrapper-Divs entfernen und Klassen flex-fill mr-2 zum <input class="form-control"> hinzufügen. Dies ist die einfachste Option.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/o wrapper div" class="flex-fill mr-2 form-control" aria-label="Search this site">
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

Wenn Sie die Chance haben, würde ich mit dieser Lösung gehen, da sie das sauberste HTML erzeugt;)

Vollbreites Suchformular mit getrennt Button mit Wrapper Div

Wenn für Ihr Formular einige Wrapper-Divs erforderlich sind (z. B. aufgrund eines Kampfes gegen Ihr CMS), müssen Sie sich mit dem Ort auseinandersetzen, an dem Sie die Klassen platzieren: Ersetzen Sie zuerst den <div class="input-group"> durch <div class="flex-fill mr-2">, und fügen Sie hinzu klassifizieren Sie w-100 zu <input class="form-control"> und löschen Sie schließlich den Wrapper <div class="input-group-append">, und verschieben Sie die Senden-Schaltfläche außerhalb des Flex-Fill-Wrappers.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="flex-fill mr-2">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/ wrapper div" class="form-control w-100" aria-label="Search this site">
        </div>
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

Handy, Mobiltelefon

Letztendlich kann Ihre Wahl darauf hinauslaufen, wie dies auf Mobilgeräten funktionieren soll. Sie können den Code natürlich noch weiter auseinandersetzen, aber es lohnt sich, die folgenden Haltepunkte zu beachten:

Full-width search form on mobile responsive

1
JamesWilson

Bootstrap 4.3 verfügt jetzt über ein Formulargitter, mit dem Sie die Spaltenbreite festlegen können. So erhielt ich mein Eingabeformular und die Schaltfläche so, dass sie die gewünschte Breite hatte.

https://getbootstrap.com/docs/4.3/components/forms/#form-grid

<form class="form" method="get" action="/products">
  <div class="row">
    <div class="col-md-6 offset-md-2">
      <input type="text" class="form-control" name="search" placeholder="search products">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-outline-primary mb-2">Search</button>
    </div>
  </div>
</form>
<br>
0