Kolumnoj

Lernu kiel modifi kolumnojn per manpleno da ebloj por vicigo, ordigo kaj kompenso danke al nia flexbox kradsistemo. Plie, vidu kiel uzi kolumnklasojn por administri larĝojn de ne-kradaj elementoj.

Sur ĉi tiu paĝo

Atentu! Nepre legu la Kradpaĝon unue antaŭ plonĝi pri kiel modifi kaj personecigi viajn kradkolumnojn.

Kiel ili funkcias

Kolumnoj konstruas sur la flexbox-arkitekturo de la krado. Flexbox signifas, ke ni havas eblojn por ŝanĝi individuajn kolumnojn kaj modifi grupojn de kolumnoj ĉe la vica nivelo . Vi elektas kiel kolumnoj kreskas, ŝrumpas aŭ alie ŝanĝiĝas.
Dum konstruado de kradaj aranĝoj, la tuta enhavo iras en kolumnoj. La hierarkio de la krado de Bootstrap iras de ujo al vico al kolumno al via enhavo. En maloftaj okazoj, vi povas kombini enhavon kaj kolumnon, sed konsciu, ke povas esti neintencitaj sekvoj.
Bootstrap inkluzivas antaŭdifinitajn klasojn por krei rapidajn, respondemajn aranĝojn. Kun ses rompopunktoj kaj dekduo da kolumnoj ĉe ĉiu krada nivelo, ni havas dekojn da klasoj jam konstruitaj por ke vi kreu viajn deziratajn aranĝojn. Ĉi tio povas esti malŝaltita per Sass, se vi volas.

Vicigo

Uzu flekskeston vicigi ilojn por vertikale kaj horizontale vicigi kolumnojn.

Vertikala vicigo

Unu el tri kolumnoj

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

Unu el tri kolumnoj

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

Horizontala vicigo

Unu el du kolumnoj

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

Kolumna envolvado

Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.

.kol-9

.col-4
Ekde 9 + 4 = 13 > 12, ĉi tiu 4-kolumna larĝa div estas envolvita al nova linio kiel unu apuda unuo.

.col-6
Postaj kolumnoj daŭras laŭ la nova linio.

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

Kolumno rompas

Rompi kolumnojn al nova linio en flexbox postulas malgrandan hakon: aldonu elementon kun width: 100%kie ajn vi volas envolvi viajn kolumnojn al nova linio. Normale tio estas plenumita per multoblaj .rows, sed ne ĉiu efektivigmetodo povas respondeci pri tio.

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

Vi ankaŭ povas apliki ĉi tiun paŭzon ĉe specifaj rompopunktoj per niaj respondemaj montraj iloj .

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

Reordigo

Ordigi klasojn

Uzu .order-klasojn por kontroli la vidan ordon de via enhavo. Ĉi tiuj klasoj estas respondemaj, do vi povas agordi la orderper rompopunkto (ekz, .order-1.order-md-2). Inkluzivas subtenon por 1tra 5ĉiuj ses kradaj niveloj.

Unue en DOM, neniu ordo aplikita

Due en DOM, kun pli granda ordo

Tria en DOM, kun ordo de 1

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

Estas ankaŭ respondemaj .order-firstkaj .order-lastklasoj kiuj ŝanĝas la orderde elemento per aplikado order: -1kaj order: 6, respektive. Ĉi tiuj klasoj ankaŭ povas esti intermiksitaj kun la numeritaj .order-*klasoj laŭbezone.

Unue en DOM, mendita lasta

Due en DOM, neordigita

Tria en DOM, ordonita unue

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

Ofsecaj kolumnoj

Vi povas kompensi kradkolumnojn en du manieroj: niaj respondemaj .offset-kradaj klasoj kaj niaj marĝenaj utilecoj . Kradklasoj estas grandigitaj por kongrui al kolumnoj dum marĝenoj estas pli utilaj por rapidaj aranĝoj kie la larĝo de la ofseto estas varia.

Ofsetaj klasoj

Movu kolumnojn dekstren uzante .offset-md-*klasojn. Ĉi tiuj klasoj pliigas la maldekstran marĝenon de kolono per *kolumnoj. Ekzemple, .offset-md-4moviĝas .col-md-4super kvar kolumnoj.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

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

Krom kolumnpurigo ĉe respondemaj rompopunktoj, vi eble bezonos restarigi kompensojn. Vidu ĉi tion en ago en la kradekzemplo .

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

Marĝenaj utilecoj

Kun la movo al flexbox en v4, vi povas uzi marĝenajn utilecojn kiel .me-autodevigi gefratajn kolumnojn unu de la alia.

.col-md-4

.col-md-4 .ms-auto

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

Memstaraj kolumnaj klasoj

La .col-*klasoj ankaŭ povas esti uzataj ekster a .rowpor doni al elemento specifan larĝon. Kiam ajn kolumnklasoj estas uzataj kiel ne rektaj filoj de vico, la kompletigoj estas preterlasitaj.

.col-3: larĝo de 25%

.col-sm-9: larĝo de 75% super sm rompopunkto

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

La klasoj povas esti uzataj kune kun utilecoj por krei respondemajn flosajn bildojn. Nepre envolvi la enhavon en .clearfixenvolvaĵon por forigi la flosilon se la teksto estas pli mallonga.

Alineo de lokokupilo teksto. Ni uzas ĝin ĉi tie por montri la uzon de la clearfix-klaso. Ni aldonas kelkajn sensignifajn frazojn ĉi tie por montri kiel la kolumnoj interagas ĉi tie kun la flosita bildo.

Kiel vi povas vidi, la alineoj gracie ĉirkaŭvolvas la flositan bildon. Nun imagu kiel ĉi tio aspektus kun iu reala enhavo ĉi tie, prefere ol nur ĉi tiu enuiga loktenilo teksto kiu daŭras kaj plu, sed efektive peras neniun palpeblan informon ĉe. Ĝi simple okupas spacon kaj ne devus esti legita.

Kaj tamen, ĉi tie vi estas, ankoraŭ persistante en legado de ĉi tiu lokokupilo teksto, esperante pri kelkaj pliaj komprenoj, aŭ iun kaŝita paska ovo de enhavo. Ŝerco, eble. Bedaŭrinde, ĉi tie estas nenio el tio.

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