Source

Tshepedišo ya keriti

Šomiša keriti ya rena ye maatla ya flexbox ya mathomo ya sellathekeng go aga dipeakanyo tša dibopego ka moka le bogolo ka lebaka la tshepedišo ya dikholomo tše lesomepedi, maemo a mahlano a go arabela a go se fetoge, diphetogo tša Sass le di-mixin, le diklase tše mmalwa tše di hlalošitšwego e sa le pele.

Kamoo e šomago ka gona

Tshepedišo ya keriti ya Bootstrap e šomiša lelokelelo la ditshelo, mela, le dikholomo go beakanya le go logaganya diteng. E agilwe ka flexbox gomme e arabela ka botlalo. Ka fase ke mohlala le tebelelo ye e tseneletšego ya ka fao keriti e kopanago ka gona.

O mofsa goba ga o tlwaelane le flexbox? Bala tlhahlo ye ya flexbox ya CSS Tricks bakeng sa bokamorago, mareo, ditlhahlo, le dikarolwana tša khoutu.

E nngwe ya dikholomo tše tharo

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Mohlala wo o lego ka mo godimo o hlola dikholomo tše tharo tša bophara bjo bo lekanago go didirišwa tše nnyane, tša magareng, tše kgolo, le tše kgolo kudu ka go šomiša diklase tša rena tša keriti tše di hlalošitšwego e sa le pele. Dikholomo tšeo di tsepame letlakaleng leo le nago le motswadi .container.

Go e thuba, ke ka fao e šomago ka gona:

Ditshelo di fana ka mokgwa wa go tsepama le go rapalala pad dikagare tša sebaka sa gago. Šomiša .containerbakeng sa bophara bja dipiksele bjo bo arabelago goba .container-fluidbakeng sa width: 100%go putla bogolo ka moka bja lefelo la go lebelela le la sedirišwa.
Methaladi ke diphuthelwana tša dikholomo. Kholomo e nngwe le e nngwe e na le e rapaletšego padding(yeo e bitšwago gutter) bakeng sa go laola sekgoba magareng ga tšona. Se paddingse gona se ganetšwa methaleng yeo e nago le mapheko a mabe. Ka tsela ye, diteng ka moka ka dikholomong ta gago di logaganywa ka pono go theoga ka lehlakoreng la nngele.
Ka go peakanyo ya keriti, diteng di swanetše go bewa ka gare ga dikholomo gomme ke fela dikholomo tšeo e ka bago bana ba ka pela ba methaladi.
Ka lebaka la flexbox, dikholomo tša keriti ntle le ye e laeditšwego widthdi tla beakanya ka go iketla bjalo ka dikholomo tša bophara bjo bo lekanago. Mohlala, ditiragalo tše nne tša .col-smtla e nngwe le e nngwe ka go iketla e ba 25% ka bophara go tšwa go ntlha ye nnyane ya go kgaotša le godimo. Bona karolo ya dikholomo tša peakanyo ya go itiriša bakeng sa mehlala ye mengwe.
Diklase tša dikholomo di laetša palo ya dikholomo tšeo o ratago go di šomiša go tšwa go tše 12 tše di kgonegago ka mothalo. Ka fao, ge o nyaka dikholomo tše tharo tša bophara bjo bo lekanago go putla, o ka šomiša .col-4.
Dikholomo widths di bewa ka diphesente, ka fao di dula di seela ebile di na le bogolo ge di bapetšwa le elemente ya tšona ya motswadi.
Dikholomo di na le go rapalala paddinggo hlama diphaephe magareng ga dikholomo ka botee, le ge go le bjalo, o ka tloša go margintšwa go methalo le paddinggo tšwa go dikholomo ka .no-guttersgodimo ga .row.
Go dira gore keriti e arabele, go na le dintlha tše hlano tša go kgaotša keriti, e tee bakeng sa ntlha e nngwe le e nngwe ya go kgaotša yeo e arabelago : dintlha ka moka tša go kgaotša (tše dinyenyane kudu), tše dinyenyane, tša magareng, tše dikgolo, le tše dikgolo kudu.
Dintlha tša go kgaotša tša keriti di theilwe godimo ga dipotšišo tša boraditaba tša bophara bja fasefase, go ra gore di šoma go ntlha yeo e tee ya go kgaotša le ka moka tšeo di lego ka godimo ga yona (mohlala, di .col-sm-4šoma go didirišwa tše nnyane, tša magareng, tše kgolo, le tše kgolo kudu, eupša e sego ntlha ya mathomo ya go xskgaotša).
O ka šomiša diklase tša keriti tše di hlalošitšwego e sa le pele (go swana le .col-4) goba di -mixin tša Sass bakeng sa go swaya semantiki kudu.

Hlokomela mellwane le diphošo go dikologa flexbox , go swana le go se kgone go šomiša dielemente tše dingwe tša HTML bjalo ka ditshelo tša flex .

Dikgetho tša keriti

Le ge Bootstrap e šomiša ems goba rems go hlaloša bontši bja bogolo, pxs e šomišwa go dintlha tša go kgaotša keriti le bophara bja setshelo. Se ke ka lebaka la gore bophara bja lefelo la go lebelela ke ka dipiksele gomme ga bo fetoge ka bogolo bja fonte .

Bona ka moo dikarolo tša tshepedišo ya keriti ya Bootstrap di šomago ka gona go ralala le didirišwa tše ntši ka tafola ye e nago le seatla.

	E nyenyane e eketsehileng <576px	E nyenyane ≥576px	Bogare ≥768px	Kgolo ≥992px	E kgolo e eketsehileng ≥1200px
Max setshelo bophara	Ga go le e tee (auto) .	540px e le	720px e le	960px e le	1140px e le
Sehlongwapele sa sehlopha	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ya dikholomo	12.
Bophara ba gutter	30px (15px ka lehlakoreng le leng le le leng la kholomo) .
E ka beha dihlaga	Ee
Go laela ka dikholomo	Ee

Dikholomo tša peakanyo ya go itiriša

Šomiša diklase tša dikholomo tše di itšego tša ntlha ya go kgaotša bakeng sa go lekanyetša bogolo bja kholomo bjo bonolo ntle le sehlopha sa dinomoro tše di lego molaleng go swana le .col-sm-6.

Bophara bja go lekana

Go fa mohlala, mo ke dipeakanyo tše pedi tša keriti tšeo di šomago go sedirišwa se sengwe le se sengwe le lefelo la go lebelela, go tloga xsgo go ya go xl. Oketša palo efe goba efe ya diklase tše di se nago yuniti bakeng sa ntlha ye nngwe le ye nngwe ya go kgaotša yeo o e hlokago gomme kholomo ye nngwe le ye nngwe e tla ba le bophara bjo bo swanago.

1 ya 2

2 ya 2

1 ya 3

2 ya 3

3 ya 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Mola o montši wa bophara bjo bo lekanago

Hlama dikholomo ta bophara bjo bo lekanago te di phatlaletšego methalo ye mentši ka go tsenya a .w-100moo o nyakago gore dikholomo di thube go ya go mothaladi wo mofsa. Dira gore dikgaotšo di arabele ka go hlakanya .w-100le didirišwa tše dingwe tša pontšho tše di arabelago .

Go be go na le phošo ya Safari flexbox yeo e ilego ya thibela se go šoma ntle le se se lego pepeneneng flex-basisgoba border. Go na le diphetolo tša diphetolelo tša kgale tša sephephediši, eupša ga se tša swanela go nyakega ge e ba diphensele tša gago tšeo di nepišitšwego di sa wele ka gare ga diphetolelo tša diphošo.

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Go beakanya bophara bja kholomo e tee

Peakanyo ya go itiriša ya dikholomo tša keriti ya flexbox gape e ra gore o ka beakanya bophara bja kholomo e tee gomme wa dira gore dikholomo tša bana babo rena di fetoše bogolo ka go iketla go e dikologa. O ka šomiša diklase tša keriti tše di hlalošitšwego e sa le pele (bjalo ka ge go bontšhitšwe ka fase), di-mixin tša keriti, goba bophara bja ka gare ga mothaladi. Hlokomela gore dikholomo tše dingwe di tla fetoša bogolo go sa šetšwe bophara bja kholomo ya bogareng.

1 ya 3

2 ya 3 (ka bophara) .

3 ya 3

1 ya 3

2 ya 3 (ka bophara) .

3 ya 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Diteng tša bophara bjo bo fetogago

Šomiša col-{breakpoint}-autodiklase go lekanyetša dikholomo go ya ka bophara bja tlhago bja diteng tša tšona.

1 ya 3

Diteng tša bophara bjo bo fetogago

3 ya 3

1 ya 3

Diteng tša bophara bjo bo fetogago

3 ya 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Diklase tše di arabelago

Keriti ya Bootstrap e akaretša maemo a mahlano a dihlopha tše di hlalošitšwego e sa le pele bakeng sa go aga dipeakanyo tše di raraganego tše di arabelago. Tlwaetša bogolo bja dikholomo tša gago go didirišwa tše nnyane kudu, tše nnyane, tša magareng, tše kgolo, goba tše kgolo kudu le ge go le bjalo o bona go swanetše.

Dintlha ka moka tša go kgaotša

Bakeng sa digridi tšeo di swanago go tšwa go tše nnyane kudu tša didirišwa go ya go tše kgolo, šomiša diklase tša .colle . .col-*Laetša sehlopha sa dinomoro ge o nyaka kholomo ya bogolo bjo bo kgethegilego; go sego bjalo, ikwe o lokologile go kgomarela .col.

col

kol-8

kol-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

E kgobokeditšwe go ya go rapaletšego

Ka go šomiša sete e tee ya .col-sm-*diklase, o ka hlama tshepedišo ya motheo ya keriti yeo e thomago e kgobokeditšwe gomme ya ba ye e rapaletšego ntlheng ye nnyane ya go kgaotša ( sm).

kol-sm-8

kol-sm-4

kol-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Kopanya le go nyalelanya

Ga o nyake gore dikholomo tša gago di no kgoboketšwa ka gare ga maemo a mangwe a keriti? Šomiša kopanyo ya diklase tše di fapanego bakeng sa legato le lengwe le le lengwe ge go nyakega. Bona mohlala wo o lego ka mo tlase bakeng sa kgopolo e kaone ya kamoo ka moka di šomago ka gona.

.kol-md-8 e le

.kol-6 .kol-md-4

.kol-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Diphaephe tša go tšhela meetse

Gutters ka arabela fetoloa ke breakpoint-itseng padding le mpe moedi utility dihlopha. Go fetola di-gutter mo moleng wo o filwego, para utility ya margin ye mpe go .rowle go swana ga padding utilities go .cols. The .containergoba .container-fluidmotswadi a ka hloka go fetolwa le yena go efoga go tlala mo go sa nyakegego, go šomiša gape go swana ga padding utility.

Mohlala ke wo wa go tlwaetša keriti ya Bootstrap lefelong le legolo la go lgkgaotša ( ) le go feta. Re okeditše .colpadding ka .px-lg-5, ra lwantšha seo ka .mx-lg-n5godimo ga motswadi .rowgomme ka morago ra beakanya .containersephuthedi ka .px-lg-5.

Padding ya kholomo ya tlwaelo

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Dikholomo tša mothaladi

Šomiša .row-cols-*diklase tše di arabelago go beakanya ka pela palo ya dikholomo tšeo di tšweletšago diteng le peakanyo ya gago gabotse. Le ge diklase tša tlwaelo .col-*di šoma go dikholomo ka botee (mohlala, .col-md-4), diklase tša dikholomo tša mothalo di bewa godimo ga motswadi .rowbjalo ka tsela ye kopana.

Šomiša diklase tše tša dikholomo tša mothalo go hlama ka pela dipeakanyo tša motheo tša keriti goba go laola dipeakanyo tša gago tša karata.

Kholomo

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kholomo

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kholomo

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kholomo

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kholomo

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

O ka diriša gape le mixin ya Sass yeo e sepelago le yona, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Go logaganya

Šomiša didirišwa tša go logaganya flexbox go logaganya dikholomo ka go otlologa le ka go rapalala. Internet Explorer 10-11 ga e thekge go logaganya go ema ga dilo tša go kobega ge setshelo sa go kobega se na le min-heightbjalo ka ge go bontšhitšwe ka mo tlase. Bona Flexbugs #3 bakeng sa dintlha tše dingwe.

Go logaganya ga go ema thwii

E nngwe ya dikholomo tše tharo

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

E nngwe ya dikholomo tše tharo

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

Go logaganya mo go rapaletšego

E nngwe ya dikholomo tše pedi

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

Ga go na diphaephe tša go tšhela meetse

Diphaephe magareng ga dikholomo ka diklaseng tša rena tša keriti tše di hlalošitšwego e sa le pele di ka tlošwa ka .no-gutters. Se se tloša margins ye mpe go tšwa .rowle ye e rapaletšego paddinggo tšwa go dikholomo ka moka tša bana tša kgauswi.

Mona ke khoutu ya mohlodi ya go hlama mekgwa ye. Hlokomela gore go tlošwa ga dikholomo go bewa sebaka go dikholomo tša bana tša mathomo fela gomme di nepišitšwe ka mokgethi wa seka . Le ge se se tšweletša mokgethi yo a itšego kudu, go tlatša dikholomo go sa dutše go ka rulaganywa gape ka didirišwa tša go arola sekgoba .

O hloka tlhamo ya go tloga mošito go ya mošito? Lahlela motswadi .containergoba .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ka go diragatša, mo ke ka fao e lebelegago ka gona. Hlokomela o ka tšwela pele go šomiša se ka diklase tše dingwe ka moka tša keriti tše di hlalošitšwego e sa le pele (go akaretšwa bophara bja dikholomo, magato a go arabela, ditaelo gape, le tše dingwe).

.kol-sm-6 .kol-md-8

.kol-6 .kol-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Go phuthela dikholomo

Ge e le gore dikholomo tša go feta tše 12 di beilwe ka gare ga mothalo o tee, sehlopha se sengwe le se sengwe sa dikholomo tša tlaleletšo se tla, bjalo ka yuniti e tee, se phuthela godimo ga mothaladi wo mofsa.

.kol-9

.col-4
Ka ge 9 + 4 = 13 > 12, div ye ya bophara bja dikholomo tše 4 e phuthelwa godimo ga mola wo mofsa bjalo ka yuniti e tee ye e latelanago.

.col-6
Dikholomo tše di latelago di tšwela pele go bapa le mothaladi wo mofsa.

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

Go kgaotša ga dikholomo

Go thuba dikholomo go mothaladi wo mofsa ka go flexbox go nyaka go thuba mo go nnyane: oketša elemente ka kae le width: 100%kae moo o nyakago go phuthela dikholomo tša gago go mothaladi wo mofsa. Ka tlwaelo se se phethwa ka .rows ye mentši, eupša ga se mokgwa wo mongwe le wo mongwe wa phethagatšo wo o ka ikarabelago ka se.

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

O ka diriša gape le go khutša mo mafelong a itšego a go kgaotša ka didirišwa tša rena tša pontšho tše di arabelago .

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

Go beakanya gape

Otara diklase

Šomiša .order-diklase tša go laola tatelano ya pono ya diteng tša gago. Diklase tše di a arabela, ka fao o ka beakanya orderka breakpoint (mohlala, .order-1.order-md-2). E akaretša thekgo ya go 1feta 12go ralala le maemo ka moka a mahlano a keriti.

Pele ka DOM, ga go na taelo yeo e dirišitšwego

Sa bobedi ka DOM, ka taelo e kgolo

Boraro ka DOM, ka taelo ya 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Gape go na le go arabela .order-firstle .order-lastdiklase tšeo di fetošago orderya elemente ka go diriša order: -1le order: 13( order: $columns + 1), ka go latelelana. Diklase tše di ka hlakantšhwa gape le diklase tše di nago le dinomoro .order-*ge go nyakega.

Pele ka DOM, laela la ho qetela

Bobedi ka DOM, unordered

Boraro ka DOM, o ile a laela pele

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

Go lefela dikholomo

O ka offset dikholomo tša keriti ka ditsela tše pedi: .offset-diklase tša rena tša keriti tše di arabelago le didirišwa tša rena tša margin . Diklase tša keriti di na le bogolo go swana le dikholomo mola mapheko a na le mohola kudu go dipeakanyo tša ka pela moo bophara bja ofesete bo fetogago.

Diklase tša offset

Suthiša dikholomo go ya go le letona o šomiša .offset-md-*diklase. Diklase tše di oketša mošito wa nngele wa kholomo ka *dikholomo. Go fa mohlala, e .offset-md-4sepela .col-md-4godimo ga dikholomo tše nne.

.kol-md-4

.kol-md-4 .ofesete-md-4

.kol-md-3 .gofeti-md-3

.kol-md-6 .gofeti-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>

Go tlaleletša go go hlwekiša kholomo mafelong a go kgaotša ao a arabelago, o ka swanelwa ke go seta gape di-offset. Bona se ka tiro mohlaleng wa keriti .

.kol-sm-5 .kol-md-6

.col-sm-5 .offset-sm-2 .kol-md-6 .gofeti-md-0

.kol-sm-6 .kol-md-5 .kol-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .kol-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>

Didirišwa tša ka thoko

Ka go hudugela go flexbox ka v4, o ka šomiša didirišwa tša margin go swana le .mr-autogo gapeletša dikholomo tša bana babo rena go tloga go tše dingwe.

.kol-md-4

.col-md-4 .ml- i o t o

.col-md-3 .ml-m d- i o t o

.kol-auto .mr-auto

.col-ya go itiriša

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Go dira dihlaga

Go tsenya diteng tša gago ka keriti ya go se fetoge, oketša ye mpsha .rowle sete ya .col-sm-*dikholomo ka gare ga .col-sm-*kholomo ye e lego gona. Methaladi ye e tsentšwego ka gare e swanetše go akaretša sete ya dikholomo tšeo di oketšago go fihla go 12 goba ka fase ga moo (ga go nyakege gore o šomiše dikholomo ka moka tše 12 tše di lego gona).

Maemo a 1: .col-sm-9

Maemo a 2: .kol-8 .kol-sm-6

Maemo a 2: .kol-4 .kol-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Di-mixin tša sass

Ge o šomiša difaele tša Sass tša mothopo tša Bootstrap, o na le kgetho ya go šomiša diphetogo tša Sass le mixins go hlama dipeakanyo tša letlakala tša tlwaelo, tša semantiki, le tše di arabelago. Diklase tša rena tša keriti tše di hlalošitšwego e sa le pele di šomiša diphetogo tše tše di swanago le di-mixin go fa sutu ka moka ya diklase tše di loketšego go šomišwa bakeng sa dipeakanyo tše di arabelago ka lebelo.

Diphetogo

Diphetogo le dimmapa di laola palo ya dikholomo, bophara bja gutter, le ntlha ya potšišo ya boraditaba yeo go yona go thongwago dikholomo tše di phaphametšego. Re šomiša tše go tšweletša diklase tša keriti tše di hlalošitšwego e sa le pele tšeo di ngwadilwego ka mo godimo, gammogo le bakeng sa di-mixin tša tlwaelo tšeo di lokeleditšwego ka mo tlase.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Ditswaki

Di-mixin di šomišwa mmogo le diphetogo tša keriti go tšweletša CSS ya semantiki ya dikholomo tša keriti ka botee.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Mohlala wa tšhomišo

O ka fetola diphetogo go boleng bja gago bja tlwaelo, goba wa no šomiša di-mixin ka dikelo tša tšona tša go se fetoge. Mohlala wa go šomiša dipeakanyo tša go se fetoge go hlama peakanyo ya dikholomo tše pedi ka sekgoba magareng ke wo.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Diteng tše kgolo

Diteng tša bobedi

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Go dira gore keriti e be ya gago

Ka go šomiša diphetogo tša rena tša keriti tša Sass tše di agetšwego ka gare le dimmapa, go a kgonega go tlwaetša ka botlalo diklase tša keriti tše di hlalošitšwego e sa le pele. Fetoša palo ya maemo, ditekanyo tša potšišo ya methopo ya ditaba, le bophara bja setshelo—ke moka o kgoboketše gape.

Dikholomo le di-gutter

Palo ya dikholomo tša keriti e ka fetošwa ka diphetogo tša Sass. $grid-columnse šomišwa go tšweletša bophara (ka phesente) bja kholomo ye nngwe le ye nngwe ka botee mola $grid-gutter-widthe beakanya bophara bja diphaephe tša kholomo.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Magato a keriti

Go feta dikholomo ka botšona, o ka tlwaetša gape palo ya magato a keriti. Ge o be o nyaka di-tier tše nne feela tša keriti, o be o tla mpshafatša$grid-breakpoints le $container-max-widthsgo selo se sengwe sa go swana le se:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Ge o dira diphetogo dife goba dife go diphetogo ta Sass goba dimmapa, o tla swanelwa ke go boloka diphetogo ta gago le go kgoboketša gape. Go dira bjalo go tla ntšha sete ye mpsha ya diklase tša keriti tše di hlalošitšwego e sa le pele bakeng sa bophara bja dikholomo, di-offset, le go otara. Didirišwa tša go bonagala tše di arabelago le tšona di tla mpshafatšwa go šomiša dintlha tša go kgaotša tša tlwaelo. Kgonthiša gore o beakanya dikelo tša keriti ka go px(e sego rem, em, goba %).