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.

<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 emakesi .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 kutsanangura hukuru hwakawanda, pxs inoshandiswa kune grid breakpoints uye upamhi hwemidziyo. Izvi zvinodaro nekuti hupamhi hwenzvimbo yekuona huri mumapikiseli uye hahuchinji nehukuru hwefonti .

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

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.

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

Equal-width multi-line

Gadzira makoramu akaenzana-paupamhi anotenderera mitsetse yakawanda nekuisa .w-100paunoda kuti makoramu atyoke kuenda kumutsara mutsva. Ita kuti mabhureki apindure nekusanganisa .w-100nemamwe anoteerera ekuratidza zvishandiso .

Paive neSafari flexbox bug yaitadzisa izvi kushanda zvisina kujeka flex-basiskana border. Kune maworkaround ekare ebrowser shanduro, asi haifanirwe kuve yakakosha kana mabhurawuza ako akasawira mubhagi shanduro.

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

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.

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

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

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.

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

Yakaturikidzana kune yakachinjika

Uchishandisa seti imwe .col-sm-*yemakirasi, unogona kugadzira yakakosha grid system iyo inotanga yakaturikidzana uye inova yakachinjika padiki breakpoint ( 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>

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.

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

Gutters

Magutter anogona kugadziridzwa zvine mutsindo nebreakpoint-specific padding uye negative margin utility makirasi. Kuti uchinje marata mumutsara wakapihwa, batanidza isina kunaka margin utility pane .rowuye kuenzanisa padding zvishandiso pane .cols. Iye .containerkana .container-fluidmubereki angangoda kugadziridzwa zvakare kuti adzivise mafashama asingadiwe, achishandisa zvakare kuenzanisa padding utility.

Heino muenzaniso wekugadzirisa iyo Bootstrap grid pane yakakura ( lg) breakpoint uye pamusoro. Takawedzera .colpadding ne .px-lg-5, tikapesana ne .mx-lg-n5pamubereki .rowtobva tagadzirisa .containerwrapper ne .px-lg-5.

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

Row columns

Shandisa .row-cols-*makirasi anopindura kukurumidza kuseta huwandu hwemakoramu anonyatso kupa zvirimo zvako uye marongero. Nepo .col-*makirasi akajairwa anoshanda kumakoramu ega ega (semuenzaniso, .col-md-4), makirasi emitsara yemakoramu akaiswa pamubereki .rowsenzira yekudimbudzira.

Shandisa aya mitsara makoramu makirasi kukurumidza kugadzira ekutanga grid marongero kana kudzora ako kadhi marongero.

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

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

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

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

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

Iwe unogona zvakare kushandisa inoperekedza Sass musanganiswa 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);
  }
}

Alignment

Shandisa flexbox alignment zvishandiso kurongedza makoramu akatwasuka uye akachinjika. Internet Explorer 10-11 haitsigire kurongeka kwakatwasuka kwezvinhu zvinochinjika kana flex container ine min-heightsezviri kuratidzwa pazasi. Ona Flexbugs #3 kuti uwane rumwe ruzivo.

Vertical alignment

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

<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

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

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 column wides, anopindura tiers, reorder, nezvimwe).

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

Column kuputira

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

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

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.

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

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

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

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.

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

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.

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

Offsetting columns

Iwe unogona kumisa grid column munzira mbiri: yedu inopindura .offset-makirasi egidhi uye yedu margin zvishandiso . Giridhi makirasi akakurisa 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.

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

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

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

Margin utilities

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

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

Nesting

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

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

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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

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