Colúin

Foghlaim conas colúin a mhodhnú le dornán roghanna le haghaidh ailíniú, ordú agus fritháireamh a bhuíochas lenár gcóras eangaí flexbox. Chomh maith leis sin, féach ar conas ranganna colún a úsáid chun leithead eilimintí neamhghreille a bhainistiú.

Ar an leathanach seo

Cinnirí suas! Bí cinnte an leathanach Greille a léamh ar dtús sula tumfaidh tú isteach conas do cholúin ghreille a mhodhnú agus a shaincheapadh.

Conas a oibríonn siad

Tógann colúin ar ailtireacht flexbox na heangaí. Ciallaíonn Flexbox go bhfuil roghanna againn chun colúin aonair a athrú agus grúpaí colún a mhodhnú ag leibhéal an rónna . Roghnaíonn tú conas a fhásann, a chrapadh nó a athraíonn colúin ar bhealach eile.
Agus leagan amach greille á thógáil, téann an t-ábhar go léir i gcolúin. Téann ordlathas ghreille Bootstrap ó choimeádán go líne go colún chuig d’inneachar. Go hannamh, is féidir leat ábhar agus colún a chomhcheangal, ach bí ar an eolas go bhféadfadh iarmhairtí neamhbheartaithe a bheith ann.
Áirítear le Bootstrap ranganna réamhshainithe chun leagan amach tapa, sofhreagrach a chruthú. Le sé phointe briste agus dosaen colún ag gach sraith ghreille, tá mórán ranganna tógtha againn cheana féin chun na leagan amach atá uait a chruthú. Is féidir é seo a dhíchumasú trí Sass más mian leat.

Ailíniú

Úsáid fóntais ailínithe flexbox chun colúin a ailíniú go hingearach agus go cothrománach.

Ailíniú ingearach

Ceann de thrí cholún

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>

Ceann de thrí cholún

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>

Ailíniú cothrománach

Ceann de dhá cholún

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>

Timfhilleadh colún

Má chuirtear níos mó ná 12 cholún laistigh d’aon ró amháin, cuimseoidh gach grúpa colún breise mar aonad amháin ar líne nua.

.col-9

.col-4
Ós rud é 9 + 4 = 13 > 12, filltear an div 4 cholún seo ar líne nua mar aonad tadhlach amháin.

.col-6
Leanann colúin ina dhiaidh sin feadh na líne nua.

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>

Briseann colún

Teastaíonn hack beag le colúin a bhriseadh go líne nua i flexbox: cuir eilimint leis width: 100%cibé áit is mian leat do cholúin a fhilleadh ar líne nua. De ghnáth baintear é seo amach le s iolracha .row, ach ní féidir le gach modh cur chun feidhme é seo a áireamh.

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

Is féidir leat an briseadh seo a chur i bhfeidhm ag brisphointí ar leith lenár bhfóntais taispeána sofhreagracha .

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

Athordú

Ranganna a ordú

Úsáid .order-ranganna chun ord amhairc d’ ábhar a rialú. Tá na ranganna seo sofhreagrach, ionas gur féidir leat an briseadhphointe a shocrú order(m.sh., .order-1.order-md-2). Áirítear leis tacaíocht le haghaidh 1tríd 5na sé shraith eangaí.

Ar dtús i DOM, níor cuireadh aon ordú i bhfeidhm

Sa dara háit i DOM, le hordú níos mó

Sa tríú háit i DOM, le hordú 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>

Tá ranganna freagrúla .order-firstagus .order-lastranganna ann freisin a athraíonn ordergné eilimint trí chur i bhfeidhm order: -1agus order: 6, faoi seach. Is féidir na ranganna seo a mheascadh freisin leis na .order-*ranganna uimhrithe de réir mar is gá.

Ar dtús i DOM, d'ordaigh seo caite

Sa dara háit i DOM, gan ordú

Sa tríú háit i DOM, ordaithe ar dtús

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>

Colúin fhritháireamh

Is féidir leat colúin ghreille a fhritháireamh ar dhá bhealach: ár .offset-ranganna greille freagrúla agus ár n- áiseanna corrlaigh . Déantar ranganna eangaí a mheaitseáil le colúin agus bíonn corrlaigh níos úsáidí le haghaidh leagan amach tapa nuair a bhíonn leithead an fhritháirimh athraitheach.

Ranganna fritháireamh

Bog na colúin ar dheis ag úsáid .offset-md-*ranganna. Méadaíonn na haicmí seo imeall clé colúin de réir *colúin. Mar shampla, .offset-md-4bogann sé .col-md-4thar cheithre cholún.

.col-md-4

.col-md-4 .fritháireamh-md-4

.col-md-3 .fritháireamh-md-3

.col-md-6 .fritháireamh-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>

Chomh maith le himréiteach colún ag brisphointí sofhreagracha, seans go mbeidh ort fritháirimh a athshocrú. Féach é seo i ngníomh sa sampla greille .

.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

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>

Fóntais corrlach

Agus tú ag bogadh go flexbox in v4, is féidir leat úsáid a bhaint as fóntais corrlaigh cosúil .me-autole iallach a chur ar cholúin siblíní óna chéile.

.col-md-4

.col-md-4 .ms-uathoibríoch

.col-md-3 .ms-md-uathoibríoch

.col-uathoibríoch .me-auto

.col-uathoibríoch

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>

Ranganna colún aonair

Is féidir na .col-*ranganna a úsáid freisin lasmuigh de .rowchun leithead ar leith a thabhairt d’eilimint. Aon uair a úsáidtear ranganna colún mar leanaí neamhdhíreacha as a chéile, fágtar na stuáil ar lár.

.col-3: leithead 25%

.col-sm-9: leithead 75% os cionn sm brisphointe

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>

Is féidir na ranganna a úsáid mar aon le fóntais chun íomhánna sofhreagracha ar snámh a chruthú. Bí cinnte an t-ábhar a fhilleadh i .clearfixbhfillteán chun an snámhán a ghlanadh má tá an téacs níos giorra.

Alt de théacs an tsealbhóra. Táimid á úsáid anseo chun úsáid an ranga clearfix a thaispeáint. Táimid ag cur go leor frásaí gan brí leis anseo chun a léiriú conas a idirghníomhaíonn na colúin anseo leis an íomhá ar snámh.

Mar is féidir leat a fheiceáil na míreanna wrap gracefully thart ar an íomhá floated. Anois, samhlaigh an chuma a bheadh air seo le roinnt ábhar iarbhír anseo, seachas an téacs leadránach seo a théann ar aghaidh agus ar aghaidh, ach nach dtugann aon fhaisnéis inláimhsithe ag. Tógann sé suas spás agus níor cheart é a léamh i ndáiríre.

Agus fós féin, seo sibh, fós ag leanúint ar aghaidh ag léamh an téacs áitsealbhóra seo, ag súil le tuilleadh léargais, nó ubh éigin folaithe na Cásca d’ábhar. A joke, b'fhéidir. Ar an drochuair, níl aon cheann de sin anseo.

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>