Colofnau

Dysgwch sut i addasu colofnau gyda llond llaw o opsiynau ar gyfer alinio, archebu a gwrthbwyso diolch i'n system grid flexbox. Hefyd, gwelwch sut i ddefnyddio dosbarthiadau colofn i reoli lled elfennau nad ydynt yn ymwneud â grid.

Ar y dudalen hon

Pennau i fyny! Gwnewch yn siŵr eich bod chi'n darllen y dudalen Grid yn gyntaf cyn plymio i mewn i sut i addasu ac addasu eich colofnau grid.

Sut maen nhw'n gweithio

Mae colofnau'n adeiladu ar bensaernïaeth flexbox y grid. Mae Flexbox yn golygu bod gennym ni opsiynau ar gyfer newid colofnau unigol ac addasu grwpiau o golofnau ar lefel rhes . Chi sy'n dewis sut mae colofnau'n tyfu, yn crebachu, neu'n newid fel arall.
Wrth adeiladu cynlluniau grid, mae'r holl gynnwys yn mynd mewn colofnau. Mae hierarchaeth grid Bootstrap yn mynd o gynhwysydd i res i golofn i'ch cynnwys. Ar adegau prin, gallwch gyfuno cynnwys a cholofn, ond byddwch yn ymwybodol y gall fod canlyniadau anfwriadol.
Mae Bootstrap yn cynnwys dosbarthiadau wedi'u diffinio ymlaen llaw ar gyfer creu cynlluniau cyflym, ymatebol. Gyda chwe torbwynt a dwsin o golofnau ar bob haen grid, mae gennym ddwsinau o ddosbarthiadau eisoes wedi'u hadeiladu i chi greu'r cynlluniau a ddymunir gennych. Gellir analluogi hwn trwy Sass os dymunwch.

Aliniad

Defnyddiwch gyfleustodau aliniad flexbox i alinio colofnau yn fertigol ac yn llorweddol.

Aliniad fertigol

Un o dair colofn

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>

Un o dair colofn

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>

Aliniad llorweddol

Un o ddwy golofn

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>

Lapio colofn

Os gosodir mwy na 12 colofn o fewn un rhes, bydd pob grŵp o golofnau ychwanegol, fel un uned, yn lapio ar linell newydd.

.col-9

.col-4
Ers 9 + 4 = 13 > 12, mae'r div 4 colofn hwn yn cael ei lapio ar linell newydd fel un uned gyffiniol.

.col-6 Mae
colofnau dilynol yn parhau ar hyd y llinell newydd.

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>

Colofn yn torri

Mae angen darn bach o dorri colofnau i linell newydd yn flexbox: ychwanegwch elfen gyda width: 100%lle bynnag yr hoffech lapio'ch colofnau i linell newydd. Fel arfer gwneir hyn gyda sawl .rows, ond ni all pob dull gweithredu roi cyfrif am hyn.

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

Gallwch hefyd gymhwyso'r toriad hwn ar dorbwyntiau penodol gyda'n cyfleustodau arddangos ymatebol .

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

Aildrefnu

Archebu dosbarthiadau

Defnyddiwch .order-ddosbarthiadau i reoli trefn weledol eich cynnwys. Mae'r dosbarthiadau hyn yn ymatebol, felly gallwch chi osod y ordertorbwynt (ee, .order-1.order-md-2). Yn cynnwys cefnogaeth ar gyfer 1drwodd 5ar draws pob un o'r chwe haen grid.

Yn gyntaf yn DOM, ni weithredwyd unrhyw orchymyn

Yn ail yn DOM, gyda gorchymyn mwy

Trydydd yn DOM, gyda gorchymyn o 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>

Mae yna hefyd ddosbarthiadau ymatebol .order-firsta .order-lastdosbarthiadau sy'n newid orderelfen trwy wneud cais order: -1a order: 6, yn y drefn honno. Gellir cymysgu'r dosbarthiadau hyn hefyd â'r .order-*dosbarthiadau wedi'u rhifo yn ôl yr angen.

Cyntaf yn DOM, gorchmynnwyd olaf

Yn ail yn DOM, yn ddi-drefn

Trydydd yn DOM, gorchymyn yn gyntaf

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>

Colofnau gwrthbwyso

Gallwch wrthbwyso colofnau grid mewn dwy ffordd: ein .offset-dosbarthiadau grid ymatebol a'n cyfleustodau ymyl . Mae dosbarthiadau grid yn cael eu maint i gyd-fynd â cholofnau tra bod ymylon yn fwy defnyddiol ar gyfer cynlluniau cyflym lle mae lled y gwrthbwyso yn amrywio.

Dosbarthiadau gwrthbwyso

Symudwch y colofnau i'r dde gan ddefnyddio .offset-md-*dosbarthiadau. Mae'r dosbarthiadau hyn yn cynyddu ymyl chwith colofn fesul *colofn. Er enghraifft, .offset-md-4yn symud .col-md-4dros bedair colofn.

.col-md-4

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

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

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

Yn ogystal â chlirio colofnau ar dorbwyntiau ymatebol, efallai y bydd angen i chi ailosod gwrthbwyso. Gweler hyn ar waith yn yr enghraifft grid .

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

Cyfleustodau ymyl

Gyda'r symudiad i flexbox yn v4, gallwch ddefnyddio cyfleustodau ymyl fel .me-autoi orfodi colofnau brodyr a chwiorydd i ffwrdd oddi wrth ei gilydd.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

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>

Dosbarthiadau colofn annibynnol

Gellir .col-*defnyddio'r dosbarthiadau hefyd y tu allan i a .rowi roi lled penodol i elfen. Pryd bynnag y defnyddir dosbarthiadau colofn fel plant rhes nad ydynt yn uniongyrchol, caiff y padinau eu hepgor.

.col-3: lled o 25%

.col-sm-9: lled o 75% uwchben torbwynt 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>

Gellir defnyddio'r dosbarthiadau ynghyd â chyfleustodau i greu delweddau arnofio ymatebol. Gwnewch yn siŵr eich bod chi'n lapio'r cynnwys mewn .clearfixpapur lapio i glirio'r fflôt os yw'r testun yn fyrrach.

Paragraff o destun dalfan. Rydyn ni'n ei ddefnyddio yma i ddangos y defnydd o'r dosbarth clearfix. Rydyn ni'n ychwanegu ychydig o ymadroddion diystyr yma i ddangos sut mae'r colofnau'n rhyngweithio yma â'r ddelwedd arnofiol.

Fel y gwelwch mae'r paragraffau'n lapio'n osgeiddig o amgylch y ddelwedd arnofiol. Nawr dychmygwch sut y byddai hyn yn edrych gyda rhywfaint o gynnwys gwirioneddol yn y fan hon, yn hytrach na dim ond y testun dalfan diflas hwn sy'n mynd ymlaen ac ymlaen, ond mewn gwirionedd nid yw'n cyfleu unrhyw wybodaeth ddiriaethol yn. Yn syml, mae'n cymryd lle ac ni ddylid ei ddarllen mewn gwirionedd.

Ac eto, dyma chi, yn dal i ddyfalbarhau wrth ddarllen y testun dalfan hwn, gan obeithio am ragor o fewnwelediadau, neu ryw wy Pasg cudd o gynnwys. Jôc, efallai. Yn anffodus, nid oes dim o hynny yma.

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>