Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Layout

Bigyan ang iyong mga form ng ilang istraktura—mula sa inline hanggang pahalang hanggang sa mga custom na pagpapatupad ng grid—kasama ang aming mga pagpipilian sa layout ng form.

Sa pahinang ito

Mga porma

Ang bawat pangkat ng mga patlang ng form ay dapat naninirahan sa isang <form>elemento. Walang ibinibigay na default na istilo ang Bootstrap para sa <form>elemento, ngunit may ilang makapangyarihang feature ng browser na ibinibigay bilang default.

  • Bago sa mga form ng browser? Pag-isipang suriin ang MDN form docs para sa pangkalahatang-ideya at kumpletong listahan ng mga available na attribute.
  • <button>s sa loob ng isang <form>default sa type="submit", kaya sikaping maging tiyak at palaging isama ang isang type.
  • Maaari mong hindi paganahin ang bawat elemento ng form sa loob ng isang form na may disabledkatangian sa <form>.

Dahil nalalapat ang Bootstrap display: blockat width: 100%sa halos lahat ng aming mga kontrol sa form, ang mga form ay sa pamamagitan ng default na stack patayo. Maaaring gamitin ang mga karagdagang klase upang pag-iba-ibahin ang layout na ito sa isang per-form na batayan.

Mga utility

Ang mga margin utility ay ang pinakamadaling paraan upang magdagdag ng ilang istraktura sa mga form. Nagbibigay ang mga ito ng pangunahing pagpapangkat ng mga label, kontrol, opsyonal na text ng form, at pagmemensahe sa pagpapatunay ng form. Inirerekomenda namin na manatili sa margin-bottommga utility, at gumamit ng iisang direksyon sa buong form para sa pagkakapare-pareho.

Huwag mag-atubiling buuin ang iyong mga form gayunpaman gusto mo, na may <fieldset>s, <div>s, o halos anumang iba pang elemento.

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

Form grid

Maaaring bumuo ng mas kumplikadong mga form gamit ang aming mga klase sa grid. Gamitin ang mga ito para sa mga layout ng form na nangangailangan ng maraming column, iba't ibang lapad, at karagdagang mga opsyon sa pag-align. Nangangailangan ng $enable-grid-classesSass variable na paganahin (naka-on bilang default).

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

Mga kanal

Sa pamamagitan ng pagdaragdag ng mga klase ng gutter modifier , maaari kang magkaroon ng kontrol sa lapad ng gutter pati na rin sa inline bilang direksyon ng block. Kinakailangan $enable-grid-classesdin na i-enable ang Sass variable (naka-on bilang default).

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

Ang mas kumplikadong mga layout ay maaari ding gawin gamit ang grid system.

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

Pahalang na anyo

Gumawa ng mga pahalang na form gamit ang grid sa pamamagitan ng pagdaragdag ng .rowklase upang bumuo ng mga grupo at paggamit ng mga .col-*-*klase upang tukuyin ang lapad ng iyong mga label at kontrol. Tiyaking idagdag din .col-form-labelsa iyong <label>mga s upang patayo silang nakasentro sa kanilang mga nauugnay na kontrol sa form.

Kung minsan, maaaring kailangan mong gumamit ng margin o padding utilities para magawa ang perpektong pagkakahanay na kailangan mo. Halimbawa, inalis namin ang padding-toplabel sa aming nakasalansan na radio inputs para mas mai-align ang text baseline.

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

Horizontal form na sukat ng label

Siguraduhing gamitin .col-form-label-smo .col-form-label-lgsa iyong mga <label>o <legend>para masundan nang tama ang laki ng .form-control-lgat .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>

Pagsusukat ng column

Gaya ng ipinakita sa mga nakaraang halimbawa, pinapayagan ka ng aming grid system na maglagay ng anumang bilang ng .cols sa loob ng isang .row. Hahatiin nila nang pantay ang magagamit na lapad sa pagitan nila. Maaari ka ring pumili ng isang subset ng iyong mga column na kukuha ng mas marami o mas kaunting espasyo, habang ang mga natitirang .cols ay pantay na hinahati ang iba, na may mga partikular na klase ng column tulad ng .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>

Auto-sizing

Ang halimbawa sa ibaba ay gumagamit ng isang flexbox utility upang patayo na igitna ang mga nilalaman at mga pagbabago .colupang .col-autoang iyong mga column ay kumukuha lamang ng maraming espasyo kung kinakailangan. Maglagay ng isa pang paraan, ang mga laki ng haligi mismo batay sa mga nilalaman.

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

Maaari mong muling i-remix iyon sa mga klase ng column na tukoy sa laki.

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

Mga inline na form

Gamitin ang mga .row-cols-*klase upang lumikha ng mga tumutugon na pahalang na layout. Sa pamamagitan ng pagdaragdag ng mga klase ng gutter modifier , magkakaroon tayo ng mga gutter sa pahalang at patayong direksyon. Sa makitid na mga viewport sa mobile, .col-12nakakatulong ang pag-stack ng mga kontrol sa form at higit pa. Inihanay .align-items-centerng mga elemento ang form sa gitna, na ginagawang .form-checkboxmaayos ang pagkakahanay.

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