Columns

Dzidza maitiro ekugadzirisa makoramu ane mashoma esarudzo ekugadzirisa, kurongeka, uye kugadzirisa nekuda kweiyo flexbox grid system. Uyezve, ona maitiro ekushandisa makoramu makirasi kubata hupamhi hwezvinhu zvisiri-grid.

Pa peji ino

Musoro! Ita shuwa yekuverenga iyo Grid peji kutanga usati wanyura mune maitiro ekugadzirisa uye kugadzirisa ako magidhi makoramu.

Mashandiro avanoita

Makolamu anovaka pagridi's flexbox architecture. Flexbox zvinoreva kuti isu tine sarudzo dzekuchinja makoramu ega uye kugadzirisa mapoka emakoramu padanho remitsetse . Iwe unosarudza kuti makoramu anokura sei, anoderera, kana neimwe nzira kuchinja.
Paunenge uchivaka marongero egidhi, zvese zvirimo zvinoenda mumakoramu. Iyo hierarchy yeBootstrap's grid inoenda kubva mumudziyo kuenda kune mutsara kuenda kukoromo kune zvirimo. Pane zvisingawanzo kuitika, unogona kusanganisa zvirimo uye koramu, asi ziva kuti panogona kuve nemhedzisiro isingatarisirwe.
Bootstrap inosanganisira makirasi akafanotsanangurwa ekugadzira nekukurumidza, anopindura marongero. Nematanho matanhatu uye gumi nemaviri makoramu pane yega grid tier, isu tine akawanda emakirasi akatovakirwa iwe kuti ugadzire yako yaunoda marongero. Izvi zvinogona kuvharwa kuburikidza neSass kana uchida.

Alignment

Shandisa flexbox alignment zvishandiso kurongedza makoramu akatwasuka uye akachinjika.

Vertical alignment

Imwe yemakoramu matatu

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Imwe yemakoramu matatu

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontal alignment

Imwe yemakoramu maviri

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Column kuputira

Kana makoramu anopfuura gumi nemaviri akaiswa mukati memutsara mumwe chete, boka rega rega remamwe makoramu, sechikamu chimwe, richaputira pamutsetse mutsva.

.col-9

.col-4
Kubva 9 + 4 = 13 > 12, iyi 4-column-wide div inoputirwa pamutsetse mutsva sechikamu chimwe chinobatika.

.col-6 Makoramu anotevera
anoenderera mberi nemutsetse mutsva.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Column breaks

Kupwanya makoramu kumutsara mutsva muflexbox kunoda hack diki: wedzera chinhu chine width: 100%chero kwaunoda kuputira makoramu ako kumutsetse mutsva. Kazhinji izvi zvinopedzwa neakawanda .rows, asi haisi nzira dzese dzekushandisa dzinogona kuzvidavirira izvi.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Iwe unogona zvakare kushandisa iyi yekuzorora pane chaiyo breakpoints neyedu inoteerera yekuratidzira zvishandiso .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Kuronga patsva

Odha makirasi

Shandisa .order-makirasi ekudzora kurongeka kwekuona kwezviri mukati mako. Aya makirasi anopindura, saka unogona kuseta iyo ordernebreakpoint (semuenzaniso, .order-1.order-md-2). Inosanganisira rutsigiro 1rwekupfuura 5ese matanhatu grid tiers.

Kutanga muDOM, hapana kurongeka kwakaiswa

Chechipiri muDOM, ine odha yakakura

Yechitatu muDOM, ine odha ye1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Kune zvakare anopindura .order-firstuye .order-lastmakirasi anoshandura iyo orderyechinhu nekushandisa order: -1uye order: 6, zvichiteerana. Aya makirasi anogona zvakare kusanganiswa .order-*nemakirasi akaverengerwa sezvinodiwa.

Chekutanga muDOM, chakaodha kekupedzisira

Chechipiri muDOM, isina kurongeka

Yetatu muDOM, yakarairwa kutanga

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Offsetting columns

Iwe unogona kumisa grid column munzira mbiri: yedu inopindura .offset-makirasi egidhi uye yedu margin zvishandiso . Giridhi makirasi akakurisa kuti aenderane makoramu nepo miganho ichinyanya kubatsira kune nekukurumidza marongero uko hupamhi hweiyo offset hunosiyana.

Offset makirasi

Fambisa makoramu kurudyi uchishandisa .offset-md-*makirasi. Aya makirasi anowedzera kumucheto kwekuruboshwe kwekoramu *nemakoramu. Semuenzaniso, .offset-md-4inofamba .col-md-4pamusoro pemakoramu mana.

.col-md-4

.com-md-4 .offset-md-4

.com-md-3 .offset-md-3

.com-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Pamusoro pekuchenesa makoramu pane anopindura breakpoints, ungangoda kuseta patsva. Ona izvi muchiito mumuenzaniso wegridi .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin utilities

Nekufamba kuenda kuflexbox muv4, unogona kushandisa margin zvishandiso senge .me-autokumanikidza hama makoramu kubva kune imwe.

.col-md-4

.com-md-4 .ms-auto

.com-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Standalone column makirasi

Iwo .col-*makirasi anogona zvakare kushandiswa kunze a .rowkupa chinhu chakananga hupamhi. Pese apo makolamu makirasi anoshandiswa seasina kunanga vana vemutsara, iwo padding anosiiwa.

.col-3: wide of 25%

.col-sm-9: width of 75% above sm breakpoint

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Iwo makirasi anogona kushandiswa pamwe chete nezvishandiso kugadzira inoteerera yakayangarara mifananidzo. Ita shuwa yekuputira zvirimo .clearfixmujira kuti ubvise float kana mavara ari mapfupi.

Ndima yemavara echibatiso. Tiri kuishandisa pano kuratidza kushandiswa kwekirasi clearfix. Tiri kuwedzera zvirevo zvishoma zvisina zvazvinoreva pano kuratidza kuti makoramu anopindirana sei pano nemufananidzo wakayangarara.

Sezvauri kuona ndima dzinoputira zvine nyasha pamufananidzo wakayangarara. Zvino fungidzira kuti izvi zvingataridzika sei nezvimwe zvirimo mukati muno, pane kungofinha nemavara echibatiso anoenderera mberi nekuenderera mberi, asi achinyatso buritsa ruzivo rwunobatika pairi. Zvinongotora nzvimbo uye hazvifanirwe kunyatsoverengwa.

Uye zvakadaro, uripano, uchiri kushingirira mukuverenga chinyorwa chino chenzvimbo, uchitarisira imwe nzwisiso, kana imwe yakavanzika easita zai remukati. A joke, zvichida. Sezvineiwo, hapana izvozvo pano.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>