Kolonnas

Uzziniet, kā modificēt kolonnas, izmantojot vairākas līdzināšanas, kārtošanas un nobīdes iespējas, pateicoties mūsu flexbox režģa sistēmai. Turklāt uzziniet, kā izmantot kolonnu klases, lai pārvaldītu ar režģi nesaistītu elementu platumu.

Šajā lapā

Uzmanību! Noteikti izlasiet lapu Režģis, pirms sākat pārdomāt, kā modificēt un pielāgot režģa kolonnas.

Kā viņi strādā

Kolonnas balstās uz režģa flexbox arhitektūru. Flexbox nozīmē, ka mums ir iespējas mainīt atsevišķas kolonnas un modificēt kolonnu grupas rindu līmenī . Jūs izvēlaties, kā kolonnas palielinās, samazinās vai citādi mainās.
Veidojot režģa izkārtojumus, viss saturs tiek ievietots kolonnās. Bootstrap režģa hierarhija mainās no konteinera uz rindu uz kolonnu līdz jūsu saturam. Retos gadījumos varat apvienot saturu un kolonnu, taču ņemiet vērā, ka var būt neparedzētas sekas.
Bootstrap ietver iepriekš definētas klases ātru, atsaucīgu izkārtojumu izveidei. Ar sešiem pārtraukuma punktiem un desmitiem kolonnu katrā režģa līmenī mēs jau esam izveidojuši desmitiem klašu, lai jūs varētu izveidot vēlamos izkārtojumus. Ja vēlaties, to var atspējot, izmantojot Sass.

Izlīdzināšana

Izmantojiet flexbox līdzināšanas utilītas, lai vertikāli un horizontāli izlīdzinātu kolonnas.

Vertikālā izlīdzināšana

Viena no trim kolonnām

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

Viena no trim kolonnām

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

Horizontālā izlīdzināšana

Viena no divām kolonnām

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

Kolonnu ietīšana

Ja vienā rindā ir ievietotas vairāk nekā 12 kolonnas, katra papildu kolonnu grupa kā viena vienība tiks aplauzta jaunā rindā.

.col-9

.col-4
Tā kā 9 + 4 = 13 > 12, šis 4 kolonnu platums tiek ietīts jaunā rindā kā viena blakus vienība.

.col-6
Nākamās kolonnas turpinās pa jauno līniju.

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

Kolonnu pārtraukumi

Lai sadalītu kolonnas uz jaunu rindiņu programmā flexbox, ir nepieciešams neliels uzlauzums: pievienojiet elementu ar vietu, width: 100%kur vēlaties aplauzt kolonnas, jaunai rindai. Parasti tas tiek paveikts ar vairākiem .rows, bet ne katra ieviešanas metode var to ņemt vērā.

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

Varat arī lietot šo pārtraukumu noteiktos pārtraukuma punktos, izmantojot mūsu adaptīvās displeja utilītas .

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

Pārkārtošana

Pasūtiet nodarbības

Izmantojiet .order-klases, lai kontrolētu sava satura vizuālo secību . Šīs klases ir adaptīvas, tāpēc varat iestatīt orderpēc pārtraukuma punktu (piemēram, .order-1.order-md-2). Ietver atbalstu 1caurbraukšanai 5visos sešos režģa līmeņos.

Vispirms DOM, pasūtījums netika piemērots

Otrais DOM, ar lielāku pasūtījumu

Trešais DOM, ar secību 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>

Ir arī adaptīvās .order-firstun .order-lastklases, kas maina orderelementa vērtību, attiecīgi piemērojot order: -1un order: 6. Šīs nodarbības pēc vajadzības var arī sajaukt ar numurētajām .order-*klasēm.

Pirmais DOM, pasūtīts pēdējais

Otrais DOM, nesakārtots

Trešais DOM, pasūtīts pirmais

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

Kolonnu nobīde

Varat kompensēt režģa kolonnas divos veidos: mūsu adaptīvās .offset-režģa klases un mūsu rezerves utilītas . Režģa klases ir pielāgotas kolonnām, savukārt piemales ir noderīgākas ātrajiem izkārtojumiem, kur nobīdes platums ir mainīgs.

Ofseta klases

Pārvietojiet kolonnas pa labi, izmantojot .offset-md-*klases. Šīs klases palielina kolonnas kreiso malu par *kolonnām. Piemēram, .offset-md-4pārvietojas .col-md-4pa četrām kolonnām.

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

Papildus kolonnu dzēšanai adaptīvos pārtraukumpunktos, iespējams, būs jāatiestata nobīdes. Skatiet to darbībā režģa piemērā .

.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žas komunālie pakalpojumi

Pārejot uz flexbox 4. versijā, varat izmantot piemales utilītprogrammas, piemēram .me-auto, lai piespiestu kolonnas atdalīt vienu no otras.

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

Atsevišķas kolonnu klases

Klases .col-*var izmantot arī ārpus a .row, lai piešķirtu elementam noteiktu platumu. Ikreiz, kad kolonnu klases tiek izmantotas kā rindas netiešas atvases, pildījumi tiek izlaisti.

.col-3: platums 25%

.col-sm-9: platums 75% virs sm pārtraukuma punkta

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

Klases var izmantot kopā ar utilītprogrammām, lai izveidotu reaģējošus peldošus attēlus. Noteikti ietiniet saturu .clearfixiesaiņojumā, lai notīrītu pludiņu, ja teksts ir īsāks.

Viettura teksta rindkopa. Mēs to izmantojam šeit, lai parādītu clearfix klases izmantošanu. Mēs šeit pievienojam dažas bezjēdzīgas frāzes, lai parādītu, kā kolonnas šeit mijiedarbojas ar peldošo attēlu.

Kā redzat, rindkopas graciozi apvij peldošo attēlu. Tagad iedomājieties, kā tas izskatītos ar reālu saturu, nevis tikai šo garlaicīgo viettura tekstu, kas turpinās un turpinās, bet patiesībā nenodod taustāmu informāciju. Tas vienkārši aizņem vietu, un to īsti nevajadzētu lasīt.

Un tomēr, lūk, jūs joprojām neatlaidīgi lasāt šo viettura tekstu, cerot uz vēl kādu atziņu vai kādu slēptu satura Lieldienu olu. Joks, iespējams. Diemžēl šeit nekā tāda nav.

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