in English

Columnas

Yachay imayna columnakuna tikrayta huk makilla akllanakunawan chiqanchaypaq, kamachiypaq chaymanta offset kaqpaq flexbox rejilla sistemaykuman gracias nispa. Astawan, qhaway imayna columna clasekuna llamk'achiyta mana rejilla elementokuna anchokunata kamachinapaq.

Kay p'anqapi

¡Umakuna wichayman! Aswan allinta ñawiriy ñawpaqta Rejilla p'anqata manaraq buceachkaspa imayna rejilla columnakunayki tikray chaymanta ruway.

Imayna llamkanku

Columnakuna rejillapa flexbox arquitectura nisqapi ruwanku. Flexbox niyta munan akllanakunayuq kayku sapalla sapaq sapaqchasqakuna tikraypaq chaymanta sapaq huñukuna tikraypaq fila patapi . Akllanki imaynatas columnakuna wiñanku, pisiyanku otaq huk hina cambianku chayta.
Rejilla churanakunata ruwaspaqa, llapa contenido columnakunapi rin. Bootstrap kaqpa rejillanpa jerarquía kaqnin huk waqaychanamanta huk filaman huk columnaman contenidoykiman rin . Mana ancha rikusqa kutikunapi, contenidota chaymanta columnata hukllawaq, ichaqa yachay mana munasqa consecuenciakuna kanman.
Bootstrap ñawpaqmanta riqsisqa clasekuna usqay, kutichiq churanakuna ruwanapaq kachkan. Suqta pakikunayuq chaymanta chunka iskayniyuq columnakuna sapa rejilla pata kaqpi, chunkakuna clasekuna ruwasqaña kayku munasqayki churanakuna ruwanaykipaq. Kayqa Sass kaqnintakama mana llamk'achiy atikunman sichus munanki.

Alineación

Flexbox chiqanchay yanapakuykunata llamk'achiy sayaqmanta, sayaqmanta columnakunata chiqanchanaykipaq.

Alineación vertical nisqa

Kimsa columnakunamanta huknin

html nisqapi

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

Kimsa columnakunamanta huknin

html nisqapi

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

Alineación horizontal nisqa

Iskay columnakunamanta huknin

html nisqapi

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

Columna envoltura

Sichus huk sapaq sapaqchasqa 12 aswan sapaqchasqakuna churasqa kanqa, sapa huñu yapasqa sapaqchasqakuna, huk unidad hina, musuq chiruman p'istunqa.

.col-9 nisqa

.col-4
9 + 4 = 13 > 12 kaqmanta, kay 4 columna-ancho div musuq chiruman huk unidad contigua hina p’istuykusqa tarikun.

.col-6
Qhipa kaq columnakuna musuq chiruwan purichkan.

html nisqapi

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

Columna pakikuna

Flexbox kaqpi musuq chiruman columnakunata pakiyqa huk uchuy hack nisqatam munan: huk elementota yapay width: 100%maypipas columnakunayki musuq chiruman p'istuykuyta munanki chaywan. Normalmente kayqa achka .rows kaqwan ruwakun, ichaqa mana sapa implementación métodochu kayta cuentata quyta atin.

.col-6 .col-sm-3 nisqa

html nisqapi

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

Hinallataq kay samayta wakin p'akiykunapi ruwayta atikunki kutichiq qhaway yanapakuyniykuwan .

.col-6 .col-sm-4 nisqa

html nisqapi

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

Wakmanta kamachiy

Clases nisqakunata kamachiy

.order-Clases llamk'achiy contenidoykipa rikuy ordenninta kamachinapaq . Kay clasekuna kutichiq kanku, chayrayku chay by breakpoint churayta atikunki order(kayhina, .order-1.order-md-2). Suqtantin rejilla patakunapi a través 1nisqapaq yanapakuyta churan .5

Ñawpaqtaqa DOM nisqapi, mana kamachiy churasqachu

Iskay kaq DOM nisqapi, aswan hatun kamachiywan

DOM nisqapi kimsa kaq, 1 nisqa ordenwan

html nisqapi

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

También hay responsivos .order-firsty .order-lastclases que cambian el orderde un elemento aplicando order: -1y order: 6, respectivamente. .order-*Kay clasekunatapas necesitasqanman hinam yupasqa clasekunawanpas chaqrusqa kanman .

Ñawpaqta DOM nisqapi, qhipa kamachisqa

Iskay kaq DOM nisqapi, mana kamachisqa

DOM nisqapi kimsa kaq, ñawpaqta kamachisqa

html nisqapi

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

Columnas nisqakunata offset nisqa

Iskay ñanpi rejilla columnakunata offsetta atikunki: kutichiq .offset-rejilla claseyku chaymanta margen yanapakuyniyku . Rejilla clasekuna sayayniyuq kanku columnakunawan tupananpaq chaymanta margenkuna aswan allin kanku usqhayta churanapaq maypichus offset anchun tikraq kachkan.

Clases de desplazamiento

.offset-md-*Clases nisqawan columnakunata pañaman kuyuchiy . Kay clasekunaqa huk columnapa lluq'i margenninta *columnakunawan yapan. Ejemplopaq, tawa columnakunapim .offset-md-4kuyun ..col-md-4

.col-md-4 nisqa

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

.col-md-3 .desplazamiento-md-3 nisqa

.col-md-6 .desplazamiento-md-3 nisqa

html nisqapi

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

Kutichiq pakikunapi columna ch'uyanchanamanta aswan, offsetkunata musuqmanta churanayki tiyan. Kayta ruwaypi qhaway rejilla ejemplopi .

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

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

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

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

html nisqapi

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

Utilidades de margen nisqa

v4 kaqpi flexbox kaqman kuyuywan, margen yanapakuykunata llamk'achiy atikunki imayna .me-autowawqi columnakuna hukninmanta karuman tanqay hina.

.col-md-4 nisqa

.col-md-4 .ms-auto nisqa

.col-md-3 .ms-md-auto nisqa

.col-auto .ñuqa-auto

.col-auto nisqa

html nisqapi

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

Sapanchasqa columna clasekuna

Chay .col-*clasekunataqa a hawapipas llamk'achiy atikunmi .rowhuk elementoman huk ancho específico nisqa qunapaq. Mayk'aqllapas columna clasekuna huk filamanta mana chiqan wawankuna hina llamk'achisqa, acolchadokuna saqisqa kanku.

.col-3: ancho de 25% .

.col-sm-9: ancho de 75% hawapi sm pakiy

html nisqapi

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

Clasekuna yanapakuykunawan kuska llamk'achiy atikunku kutichiq unupi siq'ikuna ruwanapaq. Aseguray chay contenidota huk .clearfixp’istupi p’istuy, chay flotadorta ch’uyanchanaykipaq sichus qillqasqa aswan pisi kaqtin.

Huk parrafo de texto de lugares. Kaypi llamk'achkayku clearfix clase llamk'achiyta rikuchinaykupaq. Kaypi allin pisi mana yuyayniyuq rimaykunata yapachkayku imayna columnakuna kaypi yakupi puriq siq'iwan tinkinku chayta rikuchinaykupaq.

Qawasqaykiman hinam parrafokunaqa sumaqllaña chay flotasqa imagenpa muyuriqninpi kachkan. Kunanqa yuyaykuy imaynatachus kay wakin chiqa contenidowan kaypi rikukunman, aswan kay aburrido lugarniyuq qillqallamanta chaymanta purin chaymanta purin, ichaqa chiqamanta mana hap'inapaq willayta kaypi apachin. Chayqa espaciollatam hapin, manam chiqaptachu ñawinchana.

Hinaspapas, kaypi kachkanki, hinallam takyachkanki kay sitiokuna qillqa ñawinchaypi, suyaspa wakin aswan hamutaykunata, utaq wakin pakasqa pascua uhu contenidomanta. Huk asichikuy, ichapas. Llakikuypaqmi, kaypiqa manam chaykunamantaqa kanchu.

html nisqapi

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