Grid system

Gwiritsani ntchito gridi yathu yamphamvu yoyambira flexbox kuti mupange masanjidwe amitundu yonse ndi makulidwe ake chifukwa cha magawo khumi ndi awiri, magawo asanu omvera osakhazikika, zosinthika za Sass ndi zosakaniza, ndi makalasi ambiri omwe adafotokozedwatu.

Momwe zimagwirira ntchito

Dongosolo la grid ya Bootstrap limagwiritsa ntchito zotengera zingapo, mizere, ndi mizere kuti isanjidwe ndikugwirizanitsa zomwe zili. Imapangidwa ndi flexbox ndipo imayankha kwathunthu. Pansipa pali chitsanzo ndi kuyang'ana mozama momwe gululi limakhalira pamodzi.

Zatsopano kapena simukuzidziwa ndi flexbox? Werengani izi CSS Tricks flexbox guide for background, terminology, guidelines, ndi code snippets.

Chimodzi mwa magawo atatu

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

Chitsanzo chapamwambachi chimapanga mizati itatu yofanana m'lifupi pazida zazing'ono, zapakati, zazikulu, ndi zazikulu zowonjezera pogwiritsa ntchito makalasi athu omwe tawafotokozeratu. Mizati imeneyo ili pakati pa tsamba ndi kholo .container.

Kuyiphwanya, nayi momwe imagwirira ntchito:

Zotengera zimakupatsirani njira yokhazikitsira pakati ndikuwongolera mopingasa zomwe zili patsamba lanu. Gwiritsani ntchito kukula kwa .containerpixel komvera kapena pamawonekedwe onse ndi makulidwe a chipangizo..container-fluidwidth: 100%
Mizere ndi zokutira pamizere. Chigawo chilichonse chili ndi chopingasa padding(chotchedwa gutter) chowongolera danga pakati pawo. Izi paddingndiye zimatsutsidwa pamizere yokhala ndi malire olakwika. Mwanjira iyi, zonse zomwe zili m'mipingo yanu zimayang'aniridwa kumanzere.
Pamasanjidwe a gridi, zomwe zili mumizere ziyenera kuyikidwa m'mizere ndipo magawo okhawo omwe angakhale ana amizere.
Chifukwa cha flexbox, mizati ya gridi popanda kutchulidwa widthimangokhazikitsidwa ngati mizere yofanana m'lifupi. Mwachitsanzo, magawo anayi amtundu .col-smuliwonse adzakhala 25% m'lifupi kuchokera pagawo laling'ono kupita mmwamba. Onani gawo lazopanga zokha kuti mupeze zitsanzo zambiri.
Makalasi amizere amawonetsa kuchuluka kwa magawo omwe mukufuna kugwiritsa ntchito pa 12 pa mzere uliwonse. Chifukwa chake, ngati mukufuna mizati itatu yopingasa yofanana, mutha kugwiritsa ntchito .col-4.
Mizati widths imayikidwa muzochulukira, kotero nthawi zonse imakhala yamadzimadzi komanso yokulirapo poyerekeza ndi gawo la makolo awo.
Mizati imakhala yopingasa paddingkuti ipange ngalande pakati pa mizati payokha, komabe, mutha kuchotsa marginmizere ndi mizere paddingyokhala .no-guttersndi .row.
Kuti gululi liziyankha, pali zodulitsa ma gridi asanu, imodzi pagawo lililonse loyankhidwa : ma breakpoints onse (owonjezera ang'onoang'ono), ang'onoang'ono, apakatikati, akulu, ndi akulu owonjezera.
Kudumpha kwa ma gridi kumatengera mafunso ochepera a m'lifupi mwake, kutanthauza kuti amagwira ntchito pagawo limodzi ndi onse omwe ali pamwamba pake (mwachitsanzo, .col-sm-4zimagwira ntchito pazida zazing'ono, zapakati, zazikulu, ndi zazikulu, koma osati poyambira xs).
Mutha kugwiritsa ntchito makalasi a gridi omwe afotokozedwatu (monga .col-4) kapena zosakaniza za Sass kuti musinthe mawonekedwe.

Dziwani zoperewera ndi nsikidzi kuzungulira flexbox , monga kulephera kugwiritsa ntchito zinthu zina za HTML ngati zotengera zosinthika .

Zosankha zamagulu

Pomwe Bootstrap imagwiritsa ntchito ems kapena rems kutanthauzira makulidwe ambiri, pxs amagwiritsidwa ntchito podulira ma gridi ndi m'lifupi mwake. Izi zili choncho chifukwa m'lifupi mwake malo owonera ndi ma pixel ndipo sasintha ndi kukula kwa mawonekedwe .

Onani momwe ma gridi a Bootstrap amagwirira ntchito pazida zingapo zokhala ndi tebulo lothandizira.

	Zocheperako < 576px	Yaing'ono ≥576px	Wapakatikati ≥768px	Chachikulu ≥992px	Chachikulu kwambiri ≥1200px
M'lifupi mwake	Palibe (yokha)	540px	720px	960px	1140px
Chiyambi cha kalasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ya mizati	12
Kuchuluka kwa ngalande	30px (15px mbali iliyonse ya ndime)
Nestable	Inde
Kuyitanitsa ndindalama	Inde

Zopanga zokha mizati

Gwiritsani ntchito makalasi a magawo enieni a magawo kuti musinthe magawo mosavuta popanda kalasi yodziwika bwino ngati .col-sm-6.

Kufanana m'lifupi

Mwachitsanzo, apa pali mitundu iwiri ya gridi yomwe imagwira ntchito pa chipangizo chilichonse ndi malo owonera, kuyambira xsmpaka xl. Onjezani kuchuluka kwa makalasi opanda ma unit pagawo lililonse lomwe mungafune ndipo gawo lililonse likhala lofanana m'lifupi.

1 mwa2

2 mwa2

1 mwa 3

2 mwa 3

3 mwa3

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

Pangani mizati yofanana m'lifupi mwake yomwe imayenda mizere ingapo poyikapo .w-100pomwe mukufuna kuti mizere iduke pamzere watsopano. Pangani nthawi yopuma kuti igwirizane ndi kusakanikirana .w-100ndi zida zina zowonetsera .

Panali cholakwika cha Safari flexbox chomwe chidalepheretsa izi kugwira ntchito popanda kumveka flex-basiskapena border. Pali ma workaround amitundu akale asakatuli, koma siziyenera kukhala zofunikira ngati asakatuli omwe mukufuna sakugwera m'mitundu ya ngolo.

kolo

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

Kukhazikitsa m'lifupi ndime imodzi

Kukonzekera kwa Auto kwa mizati ya grid flexbox kumatanthauzanso kuti mutha kuyika m'lifupi mwagawo limodzi ndikukhala ndi magawo am'bale mozungulira mozungulira. Mutha kugwiritsa ntchito makalasi ofotokozedweratu (monga momwe tawonetsera pansipa), zosakaniza za gridi, kapena makulidwe amzere. Dziwani kuti mizati ina idzakula mosasamala kanthu za kukula kwa ndime yapakati.

1 mwa 3

2 mwa 3 (yambiri)

3 mwa3

1 mwa 3

2 mwa 3 (yambiri)

3 mwa3

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

Zosintha m'lifupi mwake

Gwiritsani ntchito col-{breakpoint}-automakalasi kuti agwirizane ndi kukula kwake kwazomwe zili.

1 mwa 3

Zosintha m'lifupi mwake

3 mwa3

1 mwa 3

Zosintha m'lifupi mwake

3 mwa3

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

Makalasi omvera

Gululi la Bootstrap limaphatikizapo magawo asanu a makalasi omwe adafotokozedwatu kuti amange masanjidwe ovuta kuyankha. Sinthani kukula kwa mizati yanu pazida zing'onozing'ono, zazing'ono, zapakatikati, zazikulu, kapena zazikulu monga momwe mungafunire.

Ma breakpoints onse

Kwa ma gridi omwe ali ofanana kuyambira pazida zazing'ono kwambiri mpaka zazikulu, gwiritsani ntchito .colndi .col-*makalasi. Tchulani kalasi yowerengeka pamene mukufuna gawo lalikulu; apo ayi, khalani omasuka kumamatira .col.

kolo

mkolo-8

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

Zaunikidwa mpaka yopingasa

Pogwiritsa ntchito gulu limodzi la .col-sm-*makalasi, mutha kupanga makina oyambira a gridi omwe amayambira atakusanjidwa ndikukhala opingasa pagawo laling'ono ( sm).

Col-sm-8

Col-sm-4

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

Sakanizani ndikugwirizanitsa

Kodi simukufuna kuti mizati yanu ingowunjika m'magulu ena a gridi? Gwiritsani ntchito makalasi osiyanasiyana pagawo lililonse ngati pakufunika. Onani chitsanzo pansipa kuti mudziwe bwino momwe zonsezi zimagwirira ntchito.

.col-md-8

.col-6 .col-md-4

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

Mitsinje

Ma gutter amatha kusinthidwa bwino ndi ma breakpoint-Specific padding ndi makalasi osagwiritsa ntchito malire. Kuti musinthe ma gutters pamzere woperekedwa, phatikizani chogwiritsira ntchito pamphepete .rowndi zofananira pa .cols. Kholo .containerkapena .container-fluidkholo lingafunike kusinthidwanso kuti lipewe kusefukira kosafunikira, kugwiritsanso ntchito zofananira zofananira.

Nachi chitsanzo chakusintha grid ya Bootstrap pamalo akulu ( lg) breakpoint ndi pamwambapa. Tawonjezera .colzotchingira ndi .px-lg-5, kutsutsa ndi .mx-lg-n5pa kholo .rowkenako ndikusintha .containerchokulunga ndi .px-lg-5.

Custom column padding

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

Mizere mizere

Gwiritsani ntchito .row-cols-*makalasi omvera kuti mukhazikitse mwachangu kuchuluka kwa magawo omwe amakupangitsani bwino zomwe zili ndi masanjidwe anu. Pamene .col-*makalasi anthawi zonse amagwira ntchito pamigawo iliyonse (mwachitsanzo, .col-md-4), makalasi amizere amayikidwa pa kholo .rowngati njira yachidule.

Gwiritsani ntchito makalasi amizeremizerewa kuti mupange mwachangu masanjidwe a gridi kapena kuwongolera masanjidwe a makadi anu.

Mzere

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

Mzere

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

Mzere

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

Mzere

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

Mzere

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

Mukhozanso kugwiritsa ntchito Sass mixin, 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);
  }
}

Kuyanjanitsa

Gwiritsani ntchito zida zoyankhulirana za flexbox kuti mulumikizane molunjika komanso mopingasa. Internet Explorer 10-11 sichirikiza kuyanjanitsa koyima kwa zinthu zosinthika pomwe chidebe chosinthira chili ndi zomwe zili min-heightpansipa. Onani Flexbugs #3 kuti mumve zambiri.

Kuyanjanitsa koyima

Chimodzi mwa magawo atatu

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

Chimodzi mwa magawo atatu

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

Kuyanjanitsa kopingasa

Chimodzi mwa mizati iwiri

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

Palibe ngalande

Miyendo pakati pa mizati m'magulu athu omwe tafotokozeratu amatha kuchotsedwa ndi .no-gutters. Izi zimachotsa zoipa margins kuchokera .rowndi yopingasa paddingkuchokera mzati zonse za ana.

Nayi code yoyambira yopangira masitayelo awa. Zindikirani kuti zotuluka m'mipingo zimangoyang'aniridwa ndi ana oyamba okha ndipo amangosankhidwa posankha zilembo . Ngakhale kuti izi zimapanga chosankha chodziwika bwino, padding pazidutswa imatha kusinthidwanso ndi zida zapakati .

Mukufuna mapangidwe am'mphepete mpaka m'mphepete? Kugwetsa kholo .containerkapena .container-fluid.

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

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

Mwakuchita, umu ndi momwe zimawonekera. Zindikirani kuti mutha kupitiliza kugwiritsa ntchito izi ndi makalasi ena onse omwe afotokozedweratu (kuphatikiza makulidwe amzere, magawo omvera, kuyitanitsa, ndi zina zambiri).

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

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

Kuzimata ndime

Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lililonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.

.col-9

.col-4
Popeza 9 + 4 = 13 > 12, div-column-wide iyi 4 imakutidwa pamzere watsopano ngati gawo limodzi lolumikizana.

.col-6
Mizati yotsatira ikupitilira pamzere watsopano.

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

Kuthyoka kwa magawo

Kuthyola zipilala ku mzere watsopano mu flexbox kumafuna kuthyolako pang'ono: onjezani chinthu ndi width: 100%paliponse pomwe mukufuna kukulunga mizati yanu ku mzere watsopano. Kawirikawiri izi zimachitika ndi ma multiples .row, koma si njira zonse zogwiritsira ntchito zomwe zingathe kuwerengera izi.

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

Mutha kugwiritsanso ntchito nthawi yopumirayi pakanthawi kochepa ndi zida zathu zowonetsera .

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

Kuyitanitsanso

Onjezani makalasi

Gwiritsani ntchito .order-makalasi kuwongolera mawonekedwe azinthu zanu. Maphunzirowa ndi omvera, kotero mutha kukhazikitsa orderndi breakpoint (mwachitsanzo, .order-1.order-md-2). Zimaphatikizapo chithandizo chamagulu onse asanu 1a 12gridi.

Choyamba mu DOM, palibe kuyitanitsa kochitidwa

Chachiwiri mu DOM, ndi dongosolo lalikulu

Chachitatu mu DOM, ndi dongosolo la 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>

Palinso makalasi omvera .order-firstkomanso .order-lastomwe amasintha orderchinthucho pogwiritsa ntchito order: -1ndi order: 13( order: $columns + 1), motsatana. Maphunzirowa amathanso kusakanikirana ndi .order-*makalasi owerengeka ngati pakufunika.

Choyamba mu DOM, choyitanitsa komaliza

Chachiwiri ku DOM, chosayendetsedwa

Chachitatu mu DOM, cholamulidwa poyamba

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

Kuchepetsa mizati

Mutha kusintha magawo a gridi m'njira ziwiri: .offset-makalasi athu omvera a gridi ndi zida zathu zam'mphepete . Magulu a gridi amakula kuti agwirizane ndi mipingo pomwe m'mphepete mwake ndi othandiza kwambiri pamasanjidwe ofulumira pomwe m'lifupi mwake ndikusintha.

Maphunziro a Offset

Sunthani mizati kumanja pogwiritsa ntchito .offset-md-*makalasi. Makalasi awa amawonjezera malire akumanzere kwa gawo ndi magawo *. Mwachitsanzo, .offset-md-4amasuntha .col-md-4mizati inayi.

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

Kuphatikiza pa kukonza magawo pazigawo zongoyankha, mungafunike kukonzanso zosintha. Onani izi muzochitika mu grid chitsanzo .

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

Zida zam'mphepete

Ndi kusunthira ku flexbox mu v4, mutha kugwiritsa ntchito zida zam'mphepete monga .mr-autokukakamiza mizere ya abale kutali.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<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 mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .rowndi magulu omwe ali .col-sm-*mgulu lomwe lilipo .col-sm-*. Mizere yokhazikitsidwa iyenera kukhala ndi magawo 12 kapena kucheperapo (sikufunika kuti mugwiritse ntchito magawo 12 onse omwe alipo).

Gawo 1: .col-sm-9

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

Gawo 2: .col-4 .col-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>

Zosakaniza za Sass

Mukamagwiritsa ntchito mafayilo a Sass a Bootstrap, muli ndi mwayi wogwiritsa ntchito zosinthika za Sass ndi zosakaniza kuti mupange masanjidwe amasamba, a semantic, ndi omvera. Makalasi athu omwe tawafotokozeratu amagwiritsa ntchito zosinthika zomwezi ndi zosakaniza kuti apereke gulu lonse la makalasi okonzeka kugwiritsa ntchito masanjidwe omvera mwachangu.

Zosintha

Zosintha ndi mamapu zimatsimikizira kuchuluka kwa mizati, m'lifupi mwa ngalande, ndi malo ochezera a pawailesi pomwe amayambira mizati yoyandama. Timagwiritsa ntchito izi kupanga makalasi a gridi omwe afotokozedwa pamwambapa, komanso zosakaniza zomwe zalembedwa pansipa.

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

Zosakaniza

Ma Mixin amagwiritsidwa ntchito molumikizana ndi ma gridi osiyanasiyana kuti apange CSS ya semantic pamizere ya gridi iliyonse.

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

Kugwiritsa ntchito chitsanzo

Mutha kusintha zosinthika kukhala zomwe mumakonda, kapena ingogwiritsani ntchito zosakaniza zomwe zili ndi zikhalidwe zawo. Nachi chitsanzo chogwiritsa ntchito zosintha zosasinthika kuti mupange masanjidwe a magawo awiri okhala ndi kusiyana 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);
  }
}

Zomwe zili zofunika kwambiri

Zachiwiri

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

Kusintha gridi mwamakonda anu

Pogwiritsa ntchito zosinthika zathu za grid Sass ndi mamapu, ndizotheka kusinthiratu magulu omwe tawafotokozeratu. Sinthani kuchuluka kwa ma tiers, miyeso yamafunso a media, ndi makulidwe a chidebe - kenaka phatikizaninso.

Mizere ndi ngalande

Chiwerengero cha mizere ya gridi chikhoza kusinthidwa kudzera mumitundu ya Sass. $grid-columnsamagwiritsidwa ntchito kupanga m'lifupi (mu peresenti) ya ndime iliyonse payekha $grid-gutter-widthndikuyika m'lifupi mwazitsulo zazitsulo.

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

Mitundu ya gridi

Kupitilira mizati yokha, mutha kusinthanso kuchuluka kwa ma grid tiers. Ngati mumangofuna magawo anayi a gridi, mutha kusintha $grid-breakpointsndi $container-max-widthszina monga izi:

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

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

Mukapanga zosintha zilizonse pamitundu kapena mamapu a Sass, muyenera kusunga zosintha zanu ndikubwezeretsanso. Kuchita izi kudzatulutsa gulu latsopano lamagulu ofotokozedweratu amtundu wa magawo, ma offsets, ndi kuyitanitsa. Zida zowonekera zidzasinthidwanso kuti zigwiritse ntchito ma breakpoints. Onetsetsani kuti mwakhazikitsa ma grid mu px(osati rem, em, kapena %).