Makonzí

Yekola ndenge ya kobongisa makonzí na mwa ndambo ya ba options mpo na alignment, commande, mpe offsetting grâce na système na biso ya grille flexbox. Plus, tala ndenge nini kosalela ba classes ya colonne pona ko gérer ba largeurs ya ba éléments non grille.

Na lokasa oyo

Mitó likoló! Kobosana te kotánga liboso lokasa ya Grille liboso ya kozinda na ndenge ya kobongisa mpe kobongisa makonzí na yo ya grille.

Ndenge oyo basalaka

Ba colonnes etongami na architecture ya flexbox ya grille. Flexbox elakisi tozali na ba options ya ko changer ba colonnes individuelles pe ko modifier ba groupes ya ba colonnes na niveau ya ligne . Oponaka ndenge oyo makonzí ekolaka, ekómaka moke, to ebongwanaka na ndenge mosusu.
Ntango ozali kotonga ba layouts ya grille, makambo nyonso ekendaka na makonzí. Hiérarchie ya grille ya Bootstrap ekendaka na conteneur na molongo na colonne na contenus na yo. Na mabaku oyo esalemaka mingi te, okoki kosangisa makambo oyo ezali na kati mpe makonzí, kasi yebá ete ekoki kozala na makambo oyo okanisaki te.
Bootstrap ezali na ba classes prédéfinies mpo na kosala ba layouts ya mbangu, oyo ezo répondre. Na ba points de rupture motoba mpe ba colonnes zomi na mibale na niveau moko na moko ya grille, tozali na ba douzaines ya ba classes oyo esi etongami mpo na yo kosala ba layouts oyo olingi. Yango ekoki kozala désactivé via Sass soki olingi.

Kobongisa makambo

Salelá ba utilitaires ya alignment ya flexbox mpo na ko aligner ba colonnes verticalement mpe horizontalement.

Alignment ya semba

Moko ya makonzí misato

html

<div class="container text-center">
  <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>

Moko ya makonzí misato

html

<div class="container text-center">
  <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>

Alignment ya horizontal

Moko ya makonzí mibale

html

<div class="container text-center">
  <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>

Enveloppe ya colonne

Soki batye makonzí koleka 12 na kati ya molɔngɔ moko, etuluku mokomoko ya makonzí mosusu ekozipama, lokola unité moko, na molɔngɔ ya sika.

.col-9

.col-4
Lokola 9 + 4 = 13 > 12, div oyo ya 4 colonnes ya largeur ezuaka enveloppé na ligne ya sika lokola unité moko contigue.

.col-6
Makonzí oyo elandi ezali kokoba na nzela ya molɔngɔ ya sika.

html

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

Kobukana ya makonzí

Kobuka ba colonnes na ligne ya sika na flexbox esengaka petit hack : bakisa élément na width: 100%esika nionso olingi ko envelopper ba colonnes na yo na ligne ya sika. Normalement yango ekokisama na ba .rows ebele, kasi te méthode nionso ya mise en œuvre ekoki ko comptabiliser yango.

.kol-6 .kol-sm-3

html

<div class="container text-center">
  <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>

Okoki mpe kosalela pause oyo na ba points spécifiques ya rupture na ba utilitaires na biso ya écran oyo ezo répondre .

.kol-6 .kol-sm-4

html

<div class="container text-center">
  <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>

Kozongisa na molɔngɔ

Commander ba classes

Salelá .order-bakelasi mpo na kotambwisa molɔngɔ́ ya komona ya makambo na yo. Ba classes oyo ezali responsive, yango wana okoki ko setting the orderby breakpoint (par exemple, .order-1.order-md-2). Esangisi lisungi mpo 1na nzela 5na kati ya ba niveaux nionso motoba ya grille.

Ya liboso na DOM, ordre moko te esalemi

Ya mibale na DOM, na ordre ya monene koleka

Ya misato na DOM, na ordre ya 1

html

<div class="container text-center">
  <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>

Ezali mpe na ba classes responsives .order-firstmpe .order-lastoyo ebongoli ya orderya élément moko na kosalelaka order: -1mpe order: 6, respectivement. Bakelasi yango ekoki mpe kosangisama na .order-*bakelasi oyo ezali na banimero soki esengeli.

Ya liboso na DOM, commandé ya suka

Ya mibale na DOM, sans ordre

Ya misato na DOM, ba commander liboso

html

<div class="container text-center">
  <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>

Kosala offset ya ba colonnes

Okoki ko compenser ba colonnes ya grille na ndenge mibale: .offset-ba classes na biso ya grille oyo ezo répondre na ba utilitaires na biso ya marge . Ba classes ya grille ezali na taille mpo na ko correspondre na ba colonnes pendant que ba marges ezali na tina mingi pona ba layouts ya mbangu esika largeur ya offset ezali variable.

Ba kelasi ya offset

Bokende na makonzí na lobɔkɔ ya mobali na kosaleláká .offset-md-*bakelasi. Bakelasi yango ebakisaka marge ya lobɔkɔ ya mwasi ya likoló na *makonzí. Na ndakisa, .offset-md-4etambolaka .col-md-4likoló ya makonzí minei.

.col-md-4 oyo ezali

.col-md-4 .kozanga-malamu-4

.col-md-3 .kozanga-nzela-md-3

.col-md-6 .kolongolama ya biloko-md-3

html

<div class="container text-center">
  <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>

Longola bolongolami ya makonzí na bisika ya kobuka oyo eyanolaka, ekoki kozala ete osengeli kozongisa ba offsets na esika na yango. Tala yango na misala na ndakisa ya grille .

.kolo-sm-5 .kol-md-6

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

.kol-sm-6 .kol-md-5 .kol-lg-6

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

html

<div class="container text-center">
  <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>

Ba utilités ya marge

Na kokende na flexbox na v4, okoki kosalela ba utilitaires ya marge lokola .me-autoko forcer ba colonnes ya bandeko mosika moko na mosusu.

.col-md-4 oyo ezali

.col-md-4 .ms-moto ya mosala

.col-md-3 .ms-md-moto ya mosala

.col-auto .ngai-auto

.col-moto ya motuka

html

<div class="container text-center">
  <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>

Ba kelasi ya makonzí oyo ezali yango moko

Ba .col-*classes ekoki pe kosalelama libanda ya a .rowpona kopesa élément largeur spécifique. Tango nionso ba classes ya colonne esalelami lokola bana non direct ya molongo moko, ba paddings elongolami.

.col-3: bonene ya 25% .

.col-sm-9: bonene ya 75% likolo ya point de rupture ya sm

html

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

Ba classes ekoki kosalelama elongo na ba utilitaires pona kosala ba images flottées réponses. Salá makasi ozinga makambo oyo ezali na kati na .clearfixenveloppe mpo na kolongola flotteur soki makomi ezali mokuse.

Paragrafe moko ya makomi ya esika. Tozali kosalela yango awa mpo na kolakisa bosaleli ya kelasi ya clearfix. Tozali kobakisa mwa bafraze oyo ezangi ntina awa mpo na kolakisa ndenge nini makonzí esalaka awa na elilingi oyo ezali kopumbwapumbwa.

Ndenge bozali komona baparagrafe ezingami na lolenge ya kitoko zingazinga ya elilingi oyo ezali kopumbwapumbwa. Sikawa kanisá ndenge oyo elingaki komonana na mwa makambo ya solosolo na kati awa, na esika ya kozala kaka makomi oyo ya esika oyo ezali kolɛmbisa oyo ezali kokende liboso mpe ezali kokende liboso, kasi ezali mpenza kopesa nsango moko te oyo ekoki kosimbama na. Ezwa kaka esika mpe esengeli mpenza te kotánga yango.

Mpe atako bongo, awa ozali, naino kolendendela na kotanga makomi oyo ya esika, kolikya mwa bososoli mosusu, to mwa likei ya pasika oyo ebombami ya makambo. Liseki moko, mbala mosusu. Malheureusement, ezali na moko te ya wana awa.

html

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