Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Layout

Geben Sie Ihren Formularen mit unseren Formularlayoutoptionen eine gewisse Struktur – von Inline- über horizontale bis hin zu benutzerdefinierten Rasterimplementierungen.

Auf dieser Seite

Formen

Jede Gruppe von Formularfeldern sollte sich in einem <form>Element befinden. Bootstrap bietet kein Standarddesign für das <form>Element, aber es gibt einige leistungsstarke Browserfunktionen, die standardmäßig bereitgestellt werden.

  • Neu bei Browserformularen? Erwägen Sie , die MDN-Formulardokumentation zu lesen , um einen Überblick und eine vollständige Liste der verfügbaren Attribute zu erhalten.
  • <button>s innerhalb einer <form>Vorgabe zu type="submit", also bemühen Sie sich, spezifisch zu sein und fügen Sie immer eine ein type.
  • Sie können jedes Formularelement innerhalb eines Formulars mit dem disabledAttribut auf der <form>.

Da Bootstrap für fast alle unsere Formularsteuerelemente gilt, werden Formulare standardmäßig vertikal gestapelt display: block. width: 100%Zusätzliche Klassen können verwendet werden, um dieses Layout auf einer Per-Form-Basis zu variieren.

Dienstprogramme

Margin-Utilities sind der einfachste Weg, Formularen etwas Struktur zu verleihen. Sie bieten eine grundlegende Gruppierung von Beschriftungen, Steuerelementen, optionalem Formulartext und Formularvalidierungsnachrichten. Wir empfehlen, sich an margin-bottomDienstprogramme zu halten und aus Gründen der Konsistenz im gesamten Formular eine einzige Richtung zu verwenden.

Fühlen Sie sich frei, Ihre Formulare zu erstellen, wie Sie möchten, mit <fieldset>s, <div>s oder fast jedem anderen Element.

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

Raster bilden

Komplexere Formulare können mit unseren Rasterklassen erstellt werden. Verwenden Sie diese für Formularlayouts, die mehrere Spalten, unterschiedliche Breiten und zusätzliche Ausrichtungsoptionen erfordern. Erfordert die Aktivierung der $enable-grid-classesSass-Variablen (standardmäßig aktiviert).

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Dachrinnen

Durch das Hinzufügen von Bundsteg-Modifikatorklassen können Sie die Bundstegbreite sowohl in Inline- als auch in Blockrichtung steuern . Außerdem muss die $enable-grid-classesSass-Variable aktiviert sein (standardmäßig aktiviert).

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Mit dem Rastersystem können auch komplexere Layouts erstellt werden.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Horizontale Form

Erstellen Sie horizontale Formulare mit dem Raster, indem Sie die .rowKlasse zu Formgruppen hinzufügen und die .col-*-*Klassen verwenden, um die Breite Ihrer Beschriftungen und Steuerelemente anzugeben. Stellen Sie sicher, dass Sie .col-form-labelIhre <label>s auch so hinzufügen, dass sie mit ihren zugehörigen Formularsteuerelementen vertikal zentriert sind.

Manchmal müssen Sie vielleicht Hilfsprogramme für Ränder oder Auffüllungen verwenden, um die perfekte Ausrichtung zu erzielen, die Sie benötigen. Beispielsweise haben wir das padding-topEtikett unserer gestapelten Radioeingänge entfernt, um die Textgrundlinie besser auszurichten.

Radios 
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Größe des horizontalen Formularetiketts

Stellen Sie sicher, dass Sie .col-form-label-smoder .col-form-label-lgzu Ihrem <label>s oder <legend>s verwenden, um die Größe von .form-control-lgund korrekt einzuhalten .form-control-sm.

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Spaltengröße

Wie in den vorherigen Beispielen gezeigt, können Sie mit unserem Rastersystem eine beliebige Anzahl von .cols innerhalb einer .row. Sie werden die verfügbare Breite gleichmäßig zwischen ihnen aufteilen. Sie können auch eine Teilmenge Ihrer Spalten auswählen, um mehr oder weniger Platz einzunehmen, während die verbleibenden .cols den Rest gleichmäßig aufteilen, mit bestimmten Spaltenklassen wie .col-sm-7.

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

Automatische Größenanpassung

Das folgende Beispiel verwendet ein Flexbox-Dienstprogramm, um den Inhalt vertikal zu zentrieren, und ändert .colsich zu, .col-autosodass Ihre Spalten nur so viel Platz wie nötig beanspruchen. Anders ausgedrückt: Die Spaltengröße richtet sich nach dem Inhalt.

@ 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Sie können das dann noch einmal mit größenspezifischen Spaltenklassen remixen.

@ 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Inline-Formulare

Verwenden Sie die .row-cols-*Klassen, um ansprechende horizontale Layouts zu erstellen. Durch das Hinzufügen von Dachrinnenmodifikatorklassen haben wir Dachrinnen in horizontaler und vertikaler Richtung. Auf schmalen mobilen Ansichtsfenstern .col-12hilft das beim Stapeln der Formularsteuerelemente und mehr. Das .align-items-centerrichtet die Formularelemente in der Mitte aus und sorgt so für eine .form-checkboxkorrekte Ausrichtung.

@ 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>