Salta al contenuto principale Salta alla navigazione dei documenti
Check
in English

Disposizione

Dai una struttura ai tuoi moduli, da implementazioni in linea a orizzontali fino a griglie personalizzate, con le nostre opzioni di layout dei moduli.

Su questa pagina

Le forme

Ogni gruppo di campi modulo dovrebbe risiedere in un <form>elemento. Bootstrap non fornisce uno stile predefinito per l' <form>elemento, ma ci sono alcune potenti funzionalità del browser fornite per impostazione predefinita.

  • Nuovo per i moduli del browser? Prendere in considerazione la revisione dei documenti del modulo MDN per una panoramica e un elenco completo degli attributi disponibili.
  • <button>s all'interno di un <form>valore predefinito type="submit", quindi cerca di essere specifico e includi sempre un type.

Poiché Bootstrap si applica display: blocka width: 100%quasi tutti i nostri controlli dei moduli, per impostazione predefinita i moduli verranno impilati verticalmente. È possibile utilizzare classi aggiuntive per variare questo layout in base alle prestazioni.

Utilità

Le utilità di margine sono il modo più semplice per aggiungere una struttura ai moduli. Forniscono il raggruppamento di base di etichette, controlli, testo del modulo facoltativo e messaggistica di convalida del modulo. Si consiglia di attenersi alle margin-bottomutilità e di utilizzare un'unica direzione in tutto il modulo per coerenza.

Sentiti libero di costruire i tuoi moduli come preferisci, con <fieldset>s, <div>s o quasi qualsiasi altro elemento.

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

Griglia del modulo

È possibile creare moduli più complessi utilizzando le nostre classi di griglia. Usali per layout di moduli che richiedono più colonne, larghezze diverse e opzioni di allineamento aggiuntive. Richiede che la $enable-grid-classesvariabile Sass sia abilitata (attivata per impostazione predefinita).

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

grondaie

Aggiungendo classi di modificatori della grondaia , puoi avere il controllo sulla larghezza della grondaia e nella direzione inline come del blocco. Richiede anche che la $enable-grid-classesvariabile Sass sia abilitata (attiva per impostazione predefinita).

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

È anche possibile creare layout più complessi con il sistema a griglia.

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

Forma orizzontale

Crea moduli orizzontali con la griglia aggiungendo la .rowclasse ai gruppi di moduli e utilizzando le .col-*-*classi per specificare la larghezza delle etichette e dei controlli. Assicurati di aggiungere .col-form-labelanche i tuoi <label>messaggi di posta elettronica in modo che siano centrati verticalmente con i controlli del modulo associati.

A volte, potrebbe essere necessario utilizzare le utilità di margine o riempimento per creare l'allineamento perfetto di cui hai bisogno. Ad esempio, abbiamo rimosso l' padding-topetichetta degli ingressi radio impilati per allineare meglio la linea di base del testo.

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

Dimensionamento etichetta a modulo orizzontale

Assicurati di utilizzare .col-form-label-smo .col-form-label-lgai tuoi <label>s o <legend>s per seguire correttamente le dimensioni di .form-control-lge .form-control-sm.

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

Dimensionamento della colonna

Come mostrato negli esempi precedenti, il nostro sistema a griglia consente di posizionare un numero qualsiasi di .cols all'interno di un file .row. Divideranno equamente la larghezza disponibile tra di loro. Puoi anche scegliere un sottoinsieme delle tue colonne per occupare più o meno spazio, mentre i restanti .cols dividono equamente il resto, con classi di colonne specifiche come .col-sm-7.

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

Ridimensionamento automatico

L'esempio seguente utilizza un'utilità flexbox per centrare verticalmente il contenuto e le modifiche .colin .col-automodo che le colonne occupino solo lo spazio necessario. In altre parole, la colonna si ridimensiona in base al contenuto.

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

Puoi quindi remixarlo ancora una volta con classi di colonne specifiche per dimensione.

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

Moduli in linea

Usa le .row-cols-*classi per creare layout orizzontali reattivi. Aggiungendo classi di modificatori di grondaia , avremo grondaie in direzione orizzontale e verticale. Su finestre mobili strette, .col-12aiuta a impilare i controlli del modulo e altro ancora. Allinea gli .align-items-centerelementi del modulo al centro, rendendo l' .form-checkallineamento corretto.

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