Тор системасы

Он эки тилке тутумунун, беш демейки жооп берүүчү деңгээлдин, Sass өзгөрмөлөрүнүн жана аралашмаларынын жана ондогон алдын ала аныкталган класстардын аркасында бардык формадагы жана өлчөмдөрдөгү макеттерди түзүү үчүн биздин күчтүү мобилдик биринчи флексбокс торубузду колдонуңуз.

Бул кантип иштейт

Bootstrap тор системасы мазмунду жайгаштыруу жана тегиздөө үчүн бир катар контейнерлерди, саптарды жана мамычаларды колдонот. Ал flexbox менен курулган жана толугу менен жооп берет. Төмөндө бир мисал жана тордун кантип чогулуп жатканына терең көз караш берилген.

Flexbox менен жаңыдан таанышсызбы? Фон, терминология, көрсөтмөлөр жана код үзүндүлөрү үчүн бул CSS Tricks flexbox колдонмосун окуңуз .

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

Жогорудагы мисал биздин алдын ала аныкталган тор класстарыбызды колдонуу менен чакан, орто, чоң жана кошумча чоң түзмөктөрдө бирдей кеңдиктеги үч мамычаны түзөт. Бул тилкелер ата-эне менен барактын ортосуна жайгаштырылат .container.

Аны майдалап, бул жерде ал кантип иштейт:

• Контейнерлер сиздин сайттын мазмунун ортого жана туурасынан толтуруу үчүн каражатты камсыз кылат. .containerЖооптуу пикселдик туурасы .container-fluidүчүн же width: 100%бардык көрүү портуна жана түзмөктүн өлчөмдөрүнө колдонуңуз .
• Катарлар мамычалар үчүн орогучтар. Ар бир мамычанын paddingортосундагы мейкиндикти көзөмөлдөө үчүн горизонталдуу (таза деп аталат) бар. Андан paddingкийин терс четтери бар саптарга каршы аракеттенет. Ошентип, тилкелериңиздеги бардык мазмун визуалдык түрдө сол тарапка тегизделген.
• Тор макетинде мазмун мамычалардын ичине жайгаштырылышы керек жана тилкелер гана саптардын дароо балдары болушу мүмкүн.
• Flexboxтун аркасында, такталбаган тор мамычалар widthавтоматтык түрдө бирдей кеңдиктеги мамычалар катары жайгаштырылат. Мисалы, төрт инстанциянын .col-smар бири автоматтык түрдө кичинекей үзүү чекитинен 25% жана андан жогору болот. Көбүрөөк мисалдар үчүн авто-макетинг мамычалары бөлүмүн караңыз .
• Мамыча класстары ар бир сапта мүмкүн болгон 12 тилкеден колдонгуңуз келген тилкелердин санын көрсөтөт. Ошентип, эгер сиз туурасы бирдей болгон үч мамычаны кааласаңыз, колдонсоңуз болот .col-4.
• Мамычалар widthпайыздар менен белгиленет, ошондуктан алар ар дайым суюк жана негизги элементине салыштырмалуу өлчөмдө болот.
• Мамычалар горизонталдуу paddingболуп, айрым мамычалардын ортосунда арыктарды түзүшөт, бирок сиз саптардан marginжана paddingмамычалардан ..no-gutters.row
• Торду жооп бергидей кылуу үчүн, ар бир жооп берүүчү үзүү чекити үчүн бирден болгон беш торчо үзгүлтүккө учурашы бар : бардык үзүү чекиттери (кошумча кичинекей), кичине, орто, чоң жана өтө чоң.
• Тор үзгүлтүккө учуроо чекиттери минималдуу кеңдиктеги медиа суроо-талаптарга негизделет, башкача айтканда, алар ошол бир жана андан жогору тургандардын бардыгына тиешелүү (мисалы, .col-sm-4чакан, орто, чоң жана ашыкча чоң түзмөктөргө тиешелүү, бирок биринчи xsүзгүлтүккө учурабайт).
• Семантикалык белгилөө үчүн алдын ала аныкталган тор класстарын (мисалы .col-4) же Sass аралашмасын колдонсоңуз болот.

Кээ бир HTML элементтерин ийкемдүү контейнерлер катары колдонуу мүмкүн эместиги сыяктуу flexbox айланасындагы чектөөлөр менен мүчүлүштүктөрдөн кабардар болуңуз .

Тор параметрлери

Bootstrap көпчүлүк өлчөмдөрдү аныктоо үчүн ems же s колдонсо, s тордун үзүлүү чекиттери жана контейнердин туурасы үчүн колдонулат. Себеби көрүү терезесинин туурасы пикселде жана шрифт өлчөмүнө жараша өзгөрбөйт .rempx

Bootstrap тор тутумунун аспектилери бир нече түзмөктөрдө кантип иштээрин карап көрүңүз.

Колонкаларды автоматтык түрдө жайгаштыруу

сыяктуу ачык номерленген классы жок жеңил мамычанын өлчөмүн аныктоо үчүн үзгүлтүккө жараша атайын тилке класстарын колдонуңуз .col-sm-6.

Бара-бара

Мисалы, бул жерде эки тор макети бар, алар ар бир түзмөккө жана көрүү портуна чейин xsколдонулат xl. Сизге керек болгон ар бир үзүү чекити үчүн каалаган сандагы бирдиксиз класстарды кошуңуз жана ар бир мамычанын кеңдиги бирдей болот.

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

Бирдей кеңдиктеги мамычаларды бир нече саптарга бөлсө болот, бирок Safari flexbox катасы анын ачык flex-basisже border. Браузердин эски версияларын чечүү жолдору бар, бирок сиз жаңылансаңыз, алардын кереги жок.

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

Бир мамычанын туурасын коюу

Flexbox тор мамычаларынын автоматтык жайгашуусу бир мамычанын туурасын коюп, анын айланасында бир тууган мамычалардын өлчөмүн автоматтык түрдө өзгөртүүгө болот дегенди билдирет. Сиз алдын ала аныкталган тор класстарын (төмөндө көрсөтүлгөндөй), тор аралашмаларын же сызык туурасын колдонсоңуз болот. Башка мамычалар борбордук мамычанын туурасына карабастан өлчөмүн өзгөртөөрүн эске алыңыз.

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

Өзгөрмө кеңдик мазмуну

col-{breakpoint}-autoМазмунунун табигый туурасынын негизинде мамычаларды өлчөө үчүн класстарды колдонуңуз .

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

Бирдей туурасы көп катарлуу

.w-100Мамычалардын жаңы сапка үзүлүшүн каалаган жерди киргизүү менен бир нече сапты камтыган бирдей кеңдиктеги мамычаларды түзүңүз . .w-100Кээ бир жооп берүүчү дисплей утилиталарын аралаштырып, тыныгууларга жооп бериңиз .

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

Жооптуу класстар

Bootstrap торчосу татаал жооп берүүчү макеттерди куруу үчүн алдын ала аныкталган класстардын беш деңгээлин камтыйт. Мамычаларыңыздын өлчөмүн сиз ылайыктуу деп эсептесеңиз дагы, өтө кичине, кичине, орто, чоң же өтө чоң түзмөктөрдө ыңгайлаштырыңыз.

Бардык үзүү чекиттери

Түзмөктөрдүн эң кичинесинен эң чоңуна чейин бирдей болгон торлор үчүн .colжана .col-*класстарын колдонуңуз. Өзгөчө өлчөмдөгү тилке керек болгондо номерленген классты көрсөтүңүз; антпесе, жабышуудан тартынбаңыз .col.

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

Горизонталдуу түрдө тизилген

Класстардын бирдиктүү топтомун колдонуу менен .col-sm-*, сиз кичинекей үзүү чекитинде ( ) менен горизонталдуу болгонго чейин топтолуп баштаган негизги тор системасын түзө аласыз 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>

Аралаштырыңыз жана шайкеш келтириңиз

Мамычаларыңыздын жөн гана торчо катмарларында топтолушун каалабайсызбы? Зарылчылыкка жараша ар бир деңгээл үчүн ар кандай класстардын айкалышын колдонуңуз. Мунун баары кантип иштээрин жакшыраак түшүнүү үчүн төмөнкү мисалды караңыз.

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

Тегиздөө

Мамычаларды вертикалдуу жана туурасынан тегиздөө үчүн flexbox тегиздөө утилиталарын колдонуңуз.

Вертикалдуу тегиздөө

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

Горизонталдык тегиздөө

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

Арыктар жок

Биздин алдын ала аныкталган тор класстарыбыздагы мамычалардын ортосундагы арыктарды менен алып салууга болот .no-gutters. Бул бардык дароо балдар тилкелериндеги терс margins .rowжана горизонталдууларды жок кылат.padding

Бул стилдерди түзүү үчүн баштапкы код. Мамычаны жокко чыгаруунун масштабы биринчи балдар мамычаларына гана камтылганын жана атрибут тандоосу аркылуу багытталганын эске алыңыз . Бул конкреттүү селекторду жаратса да, тилкени толтурууну дагы эле мейкиндиктин утилиталары менен ыңгайлаштырса болот .

Чектен четине дизайн керекпи? Ата-энени таштап .containerже .container-fluid.

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

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

Иш жүзүндө, бул жерде кандай көрүнөт. Муну башка бардык алдын ала аныкталган тор класстары (анын ичинде мамычалардын тууралары, жооп берүүчү деңгээлдер, иреттөөлөр жана башкалар) менен колдоно берсеңиз болот.

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

Колонналарды таңуу

Эгерде бир катарга 12ден ашык мамычалар жайгаштырылса, кошумча мамычалардын ар бир тобу бир бирдик катары жаңы сапка оролот.

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

Мамычалар үзүлөт

Flexbox'то мамычаларды жаңы сапка бузуу кичинекей бузукулукту талап кылат: тилкелериңизди жаңы сапка орогуңуз келген жерге элемент кошуңуз width: 100%. Адатта, бул бир нече .rowс менен ишке ашат, бирок ар бир ишке ашыруу ыкмасы муну эсепке ала албайт.

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

Кайра иреттөө

Класстарды заказ кылуу

Мазмунуңуздун визуалдык тартибин.order- көзөмөлдөө үчүн класстарды колдонуңуз . Бул класстар жооп берет, ошондуктан сиз үзүлүү чекити боюнча кое аласыз (мисалы, ). Бардык беш сетка деңгээлинде колдоону камтыйт .order.order-1.order-md-2112

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

Элементти тиешелүүлүгүнө жараша жана ( ) колдонуу менен өзгөрткөн жооп берүүчү .order-firstжана класстар да бар. Бул класстар керек болсо номерленген класстар менен аралаштырылышы мүмкүн..order-lastorderorder: -1order: 13order: $columns + 1.order-*

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

Мамычаларды алмаштыруу

Тор мамычаларын эки жол менен алмаштыра аласыз: биздин жооп .offset-берүүчү тор класстарыбыз жана маржа утилиталарыбыз . Тор класстары мамычаларга дал келүү үчүн өлчөмдүү, ал эми четтер офсеттин туурасы өзгөрүлмө болгон тез макеттер үчүн пайдалуураак.

Офсеттик класстар

.offset-md-*Класстар аркылуу тилкелерди оңго жылдырыңыз . Бул класстар мамычанын сол четин *мамычаларга көбөйтөт. Мисалы, төрт мамычанын үстүнөн .offset-md-4жылдырат ..col-md-4

<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 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 утилиталары

V4'те flexbox'ка өтүү менен, .mr-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>

Уя салуу

Мазмунуңузду демейки торчо менен уялаштыруу үчүн, учурдагы тилкеге ​​жаңы .rowжана мамычалар топтомун кошуңуз . Уюшкан саптар 12ге чейин же андан азыраак кошулган мамычалардын топтомун камтышы керек (бардык 12 жеткиликтүү мамычаны колдонуу талап кылынбайт)..col-sm-*.col-sm-*

<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 аралашмасы

Bootstrap булагы Sass файлдарын колдонууда, сизде Sass өзгөрмөлөрүн жана аралашмаларын колдонууга ылайыктуу, семантикалык жана жооп берүүчү бет макеттерин түзүү мүмкүнчүлүгү бар. Биздин алдын ала аныкталган тор класстарыбыз ушул эле өзгөрмөлөрдү жана аралашмаларды колдонушат, алар тез жооп берүүчү макеттер үчүн колдонууга даяр класстардын бүтүндөй топтомун камсыздайт.

Өзгөрмөлөр

Өзгөрмөлөр жана карталар мамычалардын санын, каналдын туурасын жана калкып жүрүүчү мамычаларды баштоо үчүн медиа суроо чекитин аныктайт. Биз аларды жогоруда документтештирилген алдын ала аныкталган тор класстарын, ошондой эле төмөндө келтирилген ыңгайлаштырылган аралашмалар үчүн колдонобуз.

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

Миксиндер

Миксиндер тордун өзгөрмөлөрү менен бирге жеке тор мамычалары үчүн семантикалык CSS түзүү үчүн колдонулат.

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

Мисал колдонуу

Сиз өзгөрмөлөрдү өзүңүздүн жеке маанилериңизге өзгөртсөңүз болот, же жөн гана алардын демейки маанилери менен аралашмаларды колдоно аласыз. Бул жерде демейки жөндөөлөрдү колдонуунун мисалы, ортосунда боштук бар эки тилкелүү макетти түзүү.

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

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

Торду ыңгайлаштыруу

Биздин орнотулган тор Sass өзгөрмөлөрүбүздү жана карталарыбызды колдонуу менен, алдын ала аныкталган тор класстарын толугу менен ыңгайлаштырууга болот. Деңгээлдердин санын, медиа сурамынын өлчөмдөрүн жана контейнердин туурасын өзгөртүп, анан кайра компиляциялаңыз.

Колонналар жана арыктар

Тор мамычаларынын санын Sass өзгөрмөлөрү аркылуу өзгөртүүгө болот. $grid-columnsар бир жеке тилкенин кеңдиктерин (пайыз менен) түзүү үчүн колдонулат, ошол эле учурда тилкенин арыктары боюнча жана $grid-gutter-widthтегиз бөлүнгөн үзүү чекитине тиешелүү тууралыктарды берет .padding-leftpadding-right

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

Тор катмарлары

Мамычалардын өзүнөн тышкары жылып, сиз тор катмарларынын санын да ыңгайлаштыра аласыз. Эгер сиз төрт тордун деңгээлин гана кааласаңыз, анда $grid-breakpointsжана төмөнкүдөй $container-max-widthsбир нерсеге жаңыртасыз:

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

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

Sass өзгөрмөлөрүнө же карталарына кандайдыр бир өзгөртүүлөрдү киргизгенде, өзгөртүүлөрүңүздү сактап, кайра түзүшүңүз керек болот. Мындай кылуу мамычанын туурасы, жылыштары жана иреттөө үчүн алдын ала аныкталган тор класстарынын жаңы топтомун чыгарат. Жооптуу көрүнүү кызматтары да ыңгайлаштырылган токтотуу чекиттерин колдонуу үчүн жаңыртылат. Тор маанилерин px( rem, em, же эмес %) орнотуңуз.