Мрежова система

Използвайте нашата мощна мобилна мрежа flexbox за изграждане на оформления с всякакви форми и размери благодарение на система от дванадесет колони, пет нива по подразбиране, променливи и миксини на 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 за повече семантично маркиране.

Бъдете наясно с ограниченията и грешките около flexbox , като невъзможността да използвате някои HTML елементи като flex контейнери .

Опции за решетка

Докато Bootstrap използва ems или rems за дефиниране на повечето размери, pxs се използват за точки на прекъсване на мрежата и ширини на контейнери. Това е така, защото ширината на прозореца за изглед е в пиксели и не се променя с размера на шрифта .

Вижте как аспектите на мрежовата система Bootstrap работят на множество устройства с удобна таблица.

	Изключително малък <576px	Малък ≥576px	Среден ≥768px	Голям ≥992px	Изключително голям ≥1200px
Максимална ширина на контейнера	Няма (автоматично)	540 пиксела	720 пиксела	960 пиксела	1140 пиксела
Префикс на класа	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# колони	12
Ширина на улука	30px (15px от всяка страна на колона)
Нестабилен	да
Подреждане на колони	да

Автоматично оформление на колони

Използвайте специфични за точката на прекъсване класове колони за лесно оразмеряване на колони без изричен номериран клас като .col-sm-6.

Еднаква ширина

Например, ето две оформления на мрежата, които се прилагат за всяко устройство и прозорец за изглед, от xsдо xl. Добавете произволен брой класове без единици за всяка точка на прекъсване, от която се нуждаете, и всяка колона ще бъде с еднаква ширина.

1 от 2

2 от 2

1 от 3

2 от 3

3 от 3

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

Многоредов с еднаква ширина

Създайте колони с еднаква ширина, които обхващат няколко реда, като вмъкнете .w-100там, където искате колоните да се разделят на нов ред. Направете паузите отзивчиви, като смесите .w-100с някои помощни програми за отзивчив дисплей .

Имаше грешка в Safari flexbox , която не позволяваше това да работи без изричен flex-basisили border. Има заобиколни решения за по-стари версии на браузъри, но те не би трябвало да са необходими, ако вашите целеви браузъри не попадат във версиите с грешки.

полк

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

Задаване на ширина на една колона

Автоматичното оформление за решетъчните колони на flexbox също означава, че можете да зададете ширината на една колона и да накарате братските колони автоматично да преоразмеряват около нея. Можете да използвате предварително дефинирани класове на мрежата (както е показано по-долу), миксини на мрежата или вградени ширини. Имайте предвид, че другите колони ще се преоразмеряват независимо от ширината на централната колона.

1 от 3

2 от 3 (по-широк)

3 от 3

1 от 3

2 от 3 (по-широк)

3 от 3

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

Съдържание с променлива ширина

Използвайте col-{breakpoint}-autoкласове за оразмеряване на колони въз основа на естествената ширина на тяхното съдържание.

1 от 3

Съдържание с променлива ширина

3 от 3

1 от 3

Съдържание с променлива ширина

3 от 3

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

Отзивчиви класове

Решетката на Bootstrap включва пет нива от предварително дефинирани класове за изграждане на сложни адаптивни оформления. Персонализирайте размера на вашите колони на много малки, малки, средни, големи или много големи устройства, както сметнете за добре.

Всички точки на прекъсване

За мрежи, които са еднакви от най-малкото устройство до най-голямото, използвайте класовете .colи . .col-*Посочете номериран клас, когато имате нужда от колона с определен размер; в противен случай не се колебайте да се придържате към .col.

полк

col-8

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

Подредени хоризонтално

Използвайки един набор от .col-sm-*класове, можете да създадете основна мрежова система, която започва подредена и става хоризонтална при малката точка на прекъсване ( sm).

col-sm-8

col-sm-4

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

Смесете и комбинирайте

Не искате вашите колони просто да се подреждат в няколко нива на мрежата? Използвайте комбинация от различни класове за всяко ниво, ако е необходимо. Вижте примера по-долу за по-добра представа как работи всичко.

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

Улуци

Улуците могат да бъдат адаптивно коригирани чрез специфични за точката на прекъсване подложки и класове за полезност с отрицателен марж. За да промените улуците в даден ред, сдвоете помощна програма за отрицателен марж на .rowи съвпадащи помощни програми за подпълване на .cols. .containerМоже да се наложи родителят или да .container-fluidсе коригира също, за да се избегне нежелано препълване, като се използва отново съвпадаща помощна програма за подпълване.

Ето пример за персонализиране на мрежата на Bootstrap при голямата ( lg) точка на прекъсване и по-горе. Увеличихме .colподложката с .px-lg-5, противодействахме на това с .mx-lg-n5на родителя .rowи след това коригирахме .containerобвивката с .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-cols-*класове, за да зададете бързо броя на колоните, които най-добре изобразяват вашето съдържание и оформление. Докато нормалните .col-*класове се прилагат към отделните колони (напр. .col-md-4), класовете на колоните на редовете се задават на родителя .rowкато пряк път.

Използвайте тези класове колони на редове, за да създадете бързо основни оформления на мрежата или да контролирате оформленията на вашите карти.

Колона

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

Можете също да използвате придружаващия 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);
  }
}

Подравняване

Използвайте помощни програми за подравняване на flexbox за вертикално и хоризонтално подравняване на колони. Internet Explorer 10-11 не поддържа вертикално подравняване на гъвкави елементи, когато гъвкавият контейнер има, min-heightкакто е показано по-долу. Вижте Flexbugs #3 за повече подробности.

Вертикално подравняване

Една от трите колони

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

На практика ето как изглежда. Имайте предвид, че можете да продължите да използвате това с всички други предварително дефинирани класове на мрежата (включително ширини на колони, адаптивни нива, пренареждане и други).

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

Обвиване на колони

Ако повече от 12 колони са поставени в рамките на един ред, всяка група от допълнителни колони, като една единица, ще се пренесе на нов ред.

.col-9

.col-4
Тъй като 9 + 4 = 13 > 12, този div с ширина на 4 колони се обвива в нов ред като една съседна единица.

.col-6
Следващите колони продължават на новия ред.

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

Колоните се късат

Прекъсването на колони на нов ред във flexbox изисква малък хак: добавете елемент с width: 100%където искате да обвиете колоните си на нов ред. Обикновено това се постига с множество .rows, но не всеки метод на внедряване може да отчете това.

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

Можете също така да приложите това прекъсване в конкретни точки на прекъсване с нашите помощни програми за адаптивен дисплей .

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

Пренареждане

Поръчайте класове

Използвайте .order-класове за контролиране на визуалния ред на вашето съдържание. Тези класове са отзивчиви, така че можете да зададете orderточката на прекъсване по (напр. .order-1.order-md-2). Включва поддръжка за 1всичките 12пет нива на мрежата.

Първо в DOM, без приложен ред

Второ в DOM, с по-голяма поръчка

Трети в DOM, с ред 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>

Има също отзивчиви .order-firstи .order-lastкласове, които променят orderна елемент чрез прилагане order: -1и order: 13( order: $columns + 1), съответно. Тези класове могат също да се смесват с номерираните .order-*класове, ако е необходимо.

Първо в ДОМ, последно поръчано

Второ в DOM, неподредено

Трети в ДОМ, поръчан първи

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

Изместване на колони

Можете да компенсирате колоните на мрежата по два начина: нашите адаптивни .offset-класове на мрежата и нашите помощни програми за марж . Класовете на мрежата са оразмерени така, че да съответстват на колоните, докато полетата са по-полезни за бързи оформления, където ширината на отместването е променлива.

Офсетни класове

Преместете колони надясно с помощта на .offset-md-*класове. Тези класове увеличават лявото поле на колона по *колона. Например, .offset-md-4преминава .col-md-4през четири колони.

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

В допълнение към изчистването на колони при реагиращи точки на прекъсване, може да се наложи да нулирате отместванията. Вижте това в действие в примера на мрежата .

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

Марж комунални услуги

С преминаването към flexbox във v4, можете да използвате помощни програми за маржове, като например .mr-autoда принудите колоните да се разделят една от друга.

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

Гнездене

За да вложите съдържанието си в мрежата по подразбиране, добавете нова .rowи набор от .col-sm-*колони в съществуваща .col-sm-*колона. Вложените редове трябва да включват набор от колони, които се събират до 12 или по-малко (не е задължително да използвате всичките 12 налични колони).

Ниво 1: .col-sm-9

Ниво 2: .col-8 .col-sm-6

Ниво 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>

Sass mixins

Когато използвате изходните Sass файлове на Bootstrap, имате възможност да използвате 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 {
  @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>

Персонализиране на мрежата

С помощта на нашите вградени променливи и карти на мрежата Sass е възможно напълно да персонализирате предварително дефинираните класове на мрежата. Променете броя на нивата, размерите на медийните заявки и ширините на контейнера – след това компилирайте отново.

Колони и улуци

Броят на колоните на мрежата може да се променя чрез променливи на Sass. $grid-columnsсе използва за генериране на ширините (в проценти) на всяка отделна колона, докато $grid-gutter-widthзадава ширината за каналите на колоните.

$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или %).