Source

Grid system

Shandisa yedu ine simba mobile-yekutanga flexbox grid kuvaka marongero eese maumbirwo uye saizi nekutenda kune gumi nembiri column system, mashanu default anopindura matairi, Sass akasiyana uye musanganiswa, uye akawanda emakirasi akafanotsanangurwa.

Zvinoshanda sei

Bootstrap's grid system inoshandisa nhevedzano yemidziyo, mitsetse, uye makoramu kurongedza uye kurongedza zvirimo. Yakavakwa neflexbox uye inopindura zvizere. Pasi pane muenzaniso uye kutarisa kwakadzama kuti grid inosangana sei.

Mutsva kune kana kujairana neflexbox? Verenga iyi CSS Tricks flexbox gwara rekumashure , terminology, nhungamiro, uye zvimedu zvekodhi.

Imwe yemakoramu matatu

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

Muenzaniso uri pamusoro unogadzira makoramu matatu akaenzana-akaenzana pane zvidiki, zvepakati, zvakakura, uye zvimwe zvakakura zvishandiso uchishandisa makirasi edu egidhi akatsanangurwa. Makoramu iwayo ari pakati pepeji nemubereki .container.

Kuiputsa, heino mashandiro ayo:

Containers inopa nzira yekuisa pakati uye yakachinjika kupedha zvirimo zvesaiti yako. Shandisa .containerkune inopindura pixel upamhi kana .container-fluidkune width: 100%ese ekuona nzvimbo uye saizi yemuchina.
Mitsara inoputira pamakoramu. Koramu yega yega ine gorizontal padding(inonzi gutter) yekudzora nzvimbo iri pakati pawo. Izvi paddingzvinobva zvapikiswa pamitsara ine negative margins. Nenzira iyi, zvese zviri mumakoramu ako zvinooneka zvakamisikidzwa pasi kuruboshwe.
Mugadziriro yegridi, zvirimo zvinofanirwa kuiswa mukati memakoramu uye makoramu chete ndiwo anogona kunge ari vana vemitsara.
Kutenda kune flexbox, grid columns isina yakatsanangurwa widthinongozvimisikidza seyakaenzana upamhi makoramu. Semuyenzaniso, mana ezviitiko .col-smega ega ega achave 25% yakafara kubva padiki breakpoint uye kumusoro. Ona iyo auto-layout columns chikamu kune mimwe mienzaniso.
Makoramu makirasi anotaridza huwandu hwemakoramu aungade kushandisa kubva pane anobvira gumi nemaviri pamutsara. Saka, kana iwe uchida makoramu matatu akaenzana-akaenzana kuyambuka, unogona kushandisa .col-4.
Column widths yakaiswa muzvikamu, saka inogara ichiyerera uye yakakura maererano nemubereki wavo chinhu.
Makoramu ane akachinjika paddingkugadzira marata pakati pemakoramu ega, zvisinei, unogona kubvisa marginkubva mumitsara uye paddingkubva kumakoramu ane .no-gutterspane .row.
Kuita kuti gidhi ripindure, kune shanu grid breakpoints, imwe yega yega inopindura breakpoint : ese mabreakpoints (akawedzera madiki), madiki, epakati, makuru, uye akawedzera makuru.
Grid breakpoints dzakavakirwa paudiki hupamhi midhiya mivhunzo, zvichireva kuti inoshanda kune iyo imwe breakpoint uye ese ari pamusoro payo (semuenzaniso, .col-sm-4inoshanda kune zvidiki, zvepakati, hombe, uye zvimwe zvakakura zvishandiso, asi kwete yekutanga xsbreakpoint).
Unogona kushandisa makirasi egidhi akatsanangurwa (se .col-4) kana Sass musanganiswa kune mamwe semantic markup.

Ziva zvipimo uye tsikidzi dzakatenderedza flexbox , sekutadza kushandisa zvimwe zvinhu zveHTML semidziyo inochinjika .

Grid options

Nepo Bootstrap inoshandisa ems kana rems kutsanangudza saizi zhinji, pxs inoshandiswa kune grid breakpoint uye mudziyo wakafara. Izvi zvinodaro nekuti hupamhi hwenzvimbo yekuona huri mumapikiseli uye haachinji nehukuru hwefonti .

Ona maitiro eBootstrap grid system anoshanda pane akawanda maturusi ane tafura inoshanda.

	Yakawedzera diki <576px	Diki ≥576px	Pakati nepakati ≥768px	Huru ≥992px	Yakawedzera hombe ≥1200px
Kukura kwemudziyo mukuru	Hapana (otomatiki)	540px	720px	960px	1140px
Chivakashure chekirasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# yembiru	12
Gutter width	30px (15px kudivi rega rega rekoramu)
Nestable	Ehe
Column kuronga	Ehe

Auto-layout columns

Shandisa breakpoint-specific column makirasi kuitira nyore kuyera makoramu pasina kirasi ine nhamba dzakajeka senge .col-sm-6.

Kuenzana-upamhi

Semuenzaniso, heano maviri magidhi marongero anoshanda kune yega yega mudziyo uye yekutarisa, kubva xskusvika xl. Wedzera chero nhamba yeyuniti-shoma makirasi ega ega breakpoint yaunoda uye yega column ichave yakafanana hupamhi.

1 ye2

2 ye2

1 ye3

2 ye3

3 ye3

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

Makoramu akaenzana-paupamhi anogona kudimburwa kuita mitsetse yakawanda, asi pakanga paine Safari flexbox bug yaidzivirira izvi kushanda pasina kujeka flex-basiskana border. Kune ma workaround ekare ebrowser shanduro, asi haifanirwe kuve yakakosha kana iwe uri-ku-zvino.

Column

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

Kuisa upamhi hwembiru imwe

Auto-layout yeflexbox grid columns zvakare zvinoreva kuti iwe unogona kuseta hupamhi hwekoramu imwe uye kuita kuti makoramu ehama adzore otomatiki akaitenderedza. Unogona kushandisa makirasi egidhi akatsanangurwa (sezvinoratidzwa pazasi), musanganiswa wegidhi, kana inline upamhi. Ziva kuti mamwe makoramu achaita saizi zvisinei nehupamhi hwepakati column.

1 ye3

2 ye3 (yakafara)

3 ye3

1 ye3

2 ye3 (yakafara)

3 ye3

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

Variable wide content

Shandisa col-{breakpoint}-automakirasi kuhukuru makoramu zvichienderana nehupamhi hwechisikigo chezviri mukati.

1 ye3

Variable wide content

3 ye3

1 ye3

Variable wide content

3 ye3

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

Kuenzana-hupamhi-multi-row

Gadzira makoramu akaenzana-pahupamhi anotambanudzira mitsetse yakawanda nekuisa .w-100paunoda kuti makoramu atyoke kumutsetse mutsva. Ita kuti mabhureki apindure nekusanganisa iwo .w-100nemamwe anoteerera ekuratidza zvishandiso .

col

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

Makirasi anopindura

Giridhi yeBootstrap inosanganisira matavi mashanu emakirasi akatemerwa ekuvaka akaomarara anopindura marongero. Gadzirisa saizi yemakoramu ako pane yakawedzera diki, diki, yepakati, hombe, kana yakawedzera hombe zvishandiso zvisinei iwe zvaunoona zvakakodzera.

All breakpoints

Kune magridi akafanana kubva kudiki yemidziyo kusvika kune yakakura, shandisa iyo .coluye .col-*makirasi. Rondedzera kirasi ine nhamba kana iwe uchida yakanyanya saizi column; kana zvisina kudaro, inzwa wakasununguka kunamatira .col.

col

Col-8

Col-4

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

Yakaturikidzana kune yakachinjika

Uchishandisa seti imwe .col-sm-*yemakirasi, unogona kugadzira yakakosha grid system iyo inotanga yakaturikidzana uye inova yakachinjika padiki breakpoint ( sm).

col-sm-8

col-sm-4

col-sm

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

Sanganisa uye fananidza

Haudi kuti makoramu ako angomira mune mamwe grid tiers? Shandisa musanganiswa wemakirasi akasiyana kune imwe neimwe tier sezvinodiwa. Ona muenzaniso pazasi kuti uwane zano riri nani rekuti zvese zvinoshanda sei.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Alignment

Shandisa flexbox alignment zvishandiso kurongedza makoramu akatwasuka uye akachinjika.

Vertical alignment

Imwe yemakoramu matatu

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

Imwe yemakoramu matatu

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

Horizontal alignment

Imwe yemakoramu maviri

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

Hapana migero

Magetsi ari pakati pemakoramu mumakirasi edu akatemerwa grid anogona kubviswa ne .no-gutters. Izvi zvinobvisa iyo inegetive margins kubva .rowuye yakachinjika paddingkubva kune ese ariko vana makoramu.

Heino iyo source code yekugadzira masitayipi aya. Ziva kuti makoramu epamusoro anotariswa kumakoramu ekutanga evana chete uye anonangwa kuburikidza nechisarudzo chehunhu . Nepo izvi zvichigadzira imwe yakasarudzika yakasarudzika, column padding inogona kuramba ichigadziridzwa ne spacing utilities .

Unoda kumucheto-kune-kumucheto dhizaini? Donhedza mubereki .containerkana .container-fluid.

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

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

Mukuita, heino maitiro ayo anotaridzika. Ziva kuti unogona kuenderera mberi nekushandisa izvi nemamwe ese akafanotsanangurwa makirasi egidhi (kusanganisira makoramu hupamhi, inopindura tiers, reorder, nezvimwe).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

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

Column kuputira

Kana makoramu anopfuura gumi nemaviri akaiswa mukati memutsara mumwe chete, boka rega rega remamwe makoramu, sechikamu chimwe, richaputira pamutsetse mutsva.

.col-9

.col-4
Kubva 9 + 4 = 13 > 12, iyi 4-column-wide div inoputirwa pamutsetse mutsva sechikamu chimwe chinobatika.

.col-6 Makoramu anotevera
anoenderera mberi nemutsetse mutsva.

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

Column breaks

Kupwanya makoramu kumutsara mutsva muflexbox kunoda hack diki: wedzera chinhu chine width: 100%chero kwaunoda kuputira makoramu ako kumutsetse mutsva. Kazhinji izvi zvinopedzwa neakawanda .rows, asi haisi nzira dzese dzekushandisa dzinogona kuzvidavirira izvi.

.col-6 .col-sm-3

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

Iwe unogona zvakare kushandisa iyi yekuzorora pane chaiyo breakpoints neyedu inoteerera yekuratidzira zvishandiso .

.col-6 .col-sm-4

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

Kuronga patsva

Odha makirasi

Shandisa .order-makirasi ekudzora kurongeka kwekuona kwezviri mukati mako. Aya makirasi anopindura, saka unogona kuseta iyo ordernebreakpoint (semuenzaniso, .order-1.order-md-2). Inosanganisira rutsigiro 1rwekupfuura 12ese mashanu grid tiers.

Kutanga, asi zvisina kurongeka

Chechipiri, asi chekupedzisira

Chechitatu, asi chekutanga

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Kune zvakare anopindura .order-firstuye .order-lastmakirasi anoshandura iyo orderyechinhu nekushandisa order: -1uye order: 13( order: $columns + 1), zvichiteerana. Aya makirasi anogona zvakare kusanganiswa .order-*nemakirasi akaverengerwa sezvinodiwa.

Kutanga, asi kwekupedzisira

Chechipiri, asi isina kurongeka

Chechitatu, asi chekutanga

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Offsetting columns

Iwe unogona kumisa grid column munzira mbiri: yedu inopindura .offset-makirasi egidhi uye yedu margin zvishandiso . Grid makirasi akakura kuti aenderane makoramu nepo miganho ichinyanya kubatsira kune nekukurumidza marongero uko hupamhi hweiyo offset hunosiyana.

Offset makirasi

Fambisa makoramu kurudyi uchishandisa .offset-md-*makirasi. Aya makirasi anowedzera kumucheto kwekuruboshwe kwekoramu *nemakoramu. Semuenzaniso, .offset-md-4inofamba .col-md-4pamusoro pemakoramu mana.

.col-md-4

.com-md-4 .offset-md-4

.com-md-3 .offset-md-3

.com-md-6 .offset-md-3

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

Pamusoro pekuchenesa makoramu pane anopindura breakpoints, ungangoda kuseta patsva. Ona izvi muchiito mumuenzaniso wegridi .

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

Margin utilities

Nekufamba kuenda kuflexbox muv4, unogona kushandisa margin zvishandiso senge .mr-autokumanikidza hama makoramu kubva kune imwe.

.col-md-4

.col-md-4 .ml-auto

.com-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Nesting

Kuti uise zvirimo zvako neiyo default grid, wedzera nyowani .rowuye seti .col-sm-*yemakoramu mukati meiyo iripo .col-sm-*column. Mitsara yakamira inofanirwa kusanganisira seti yemakoramu anowedzera kusvika gumi nemaviri kana mashoma (hazvidiwe kuti ushandise ese ari gumi nemaviri makoramu).

Nhamba 1: .col-sm-9

Nhamba 2: .col-8 .col-sm-6

Nhamba 2: .col-4 .col-sm-6

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

Sass musanganiswa

Paunenge uchishandisa Bootstrap's source Sass mafaera, iwe une sarudzo yekushandisa Sass zvinosiyana uye musanganiswa kugadzira tsika, semantic, uye inoteerera peji marongero. Yedu yakafanotsanangurwa makirasi egidhi anoshandisa aya akasiyana-siyana uye musanganiswa kuti ape yakazara sutu yeakagadzirira-kushandisa-makirasi ekukurumidza anopindura marongero.

Variables

Zvinosiyana-siyana uye mepu zvinotarisa huwandu hwemakoramu, hupamhi hweguta, uye nzvimbo yemibvunzo yenhau panotangira makoramu akayangarara. Isu tinoshandisa izvi kugadzira iyo yakafanotsanangurwa makirasi egidhi akanyorwa pamusoro, pamwe neyetsika musanganiswa akanyorwa pazasi.

$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
);

Mixins

Mixins anoshandiswa pamwe chete negridhi zvinosiyana kugadzira semantic CSS yemakoramu ega ega.

// 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);

Muenzaniso kushandiswa

Iwe unogona kushandura mavhezheni kune ako ega tsika tsika, kana kungo shandisa mamixins ane maitiro avo akasarudzika. Heino muenzaniso wekushandisa zvigadziriso zvekutanga kugadzira maviri-column marongero ane gap pakati.

.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);
  }
}

Main content

Secondary content

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

Kugadzirisa grid

Uchishandisa yedu yakavakirwa-mukati gidhi Sass akasiyana uye mepu, zvinogoneka kugadzirisa zvizere makirasi egidhi akatsanangurwa. Shandura huwandu hwetiyeri, midhiya yemubvunzo zviyero, uye upamhi hwemudziyo - wobva wadzokorora.

Columns uye gutters

Huwandu hwemakoramu egridi anogona kugadziridzwa kuburikidza neSass zvinosiyana. $grid-columnsinoshandiswa kugadzira hupamhi (mumuzana) yekoramu yega yega ichiseta $grid-gutter-widthhupamhi hwemagita emakoramu.

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

Grid tiers

Kufamba kupfuura makoramu pachawo, iwe unogona zvakare kugadzirisa huwandu hwegridi tiers. Kana iwe waida magidhi mana chete, waizovandudza $grid-breakpointsuye $container-max-widthskune chimwe chinhu chakadai:

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

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

Paunenge uchiita chero shanduko kune maSass akasiyana kana mepu, iwe unozofanirwa kuchengetedza shanduko dzako uye kudzorera. Kuita izvi kunoburitsa seti nyowani yeyakafanotsanangurwa makirasi egidhi yemakoramu hupamhi, zvigadziriso, uye kuronga. Inoteerera inoonekwa zvinoshandiswa zvakare ichagadziridzwa kuti ishandise tsika yekutyora. Ita shuwa yekuseta grid values mukati px(kwete rem, em, kana %).