Колумне

Научите како да модификујете колоне са прегршт опција за поравнање, редослед и померање захваљујући нашем систему флекбок мреже. Поред тога, погледајте како да користите класе колона за управљање ширинама елемената који нису у мрежи.

На овој страници

Главу горе! Обавезно прво прочитајте страницу Мрежа пре него што уђете у то како да измените и прилагодите своје колоне мреже.

Како раде

Колоне се заснивају на флекбок архитектури мреже. Флекбок значи да имамо опције за промену појединачних колона и модификовање група колона на нивоу реда . Ви бирате како колоне расту, смањују се или се на други начин мењају.
Када правите распореде мреже, сав садржај иде у колоне. Хијерархија Боотстрап мреже иде од контејнера до реда до колоне до вашег садржаја. У ретким приликама можете комбиновати садржај и колумну, али имајте на уму да може доћи до нежељених последица.
Боотстрап укључује унапред дефинисане класе за креирање брзих распореда који реагују. Са шест тачака прекида и десетак колона на сваком нивоу мреже, имамо на десетине класа већ изграђених за вас да креирате жељене распореде. Ово се може онемогућити преко Сасс-а ако желите.

Поравнање

Користите услужне програме за поравнање флекбок-а за вертикално и хоризонтално поравнање колона.

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

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

<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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Омотавање колоне

Ако је више од 12 колона постављено у један ред, свака група додатних колона ће се, као једна јединица, премотати у нови ред.

.цол-9

.цол-4
Пошто је 9 + 4 = 13 > 12, овај див ширине 4 колоне се умотава у нови ред као једна суседна јединица.

.цол-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>

Преломи колона

Прекидање колона у нови ред у флекбок-у захтева мали хак: додајте елемент width: 100%где год желите да умотате своје колоне у нови ред. Обично се ово постиже са вишеструким .rowс, али не може сваки метод имплементације то објаснити.

.цол-6 .цол-см-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>

Такође можете да примените ову паузу на одређеним тачкама прекида помоћу наших услужних програма за приказ који реагује .

.цол-6 .цол-см-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преко 5свих шест нивоа мреже.

Прво у ДОМ-у, ред није примењен

Други у ДОМ-у, са већом наруџбом

Трећи у ДОМ-у, са редоследом од 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6, респективно. Ове класе се такође могу мешати са нумерисаним .order-*класама по потреби.

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

Други у ДОМ-у, неуређен

Трећи у ДОМ-у, наручени први

<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преко четири колоне.

.цол-мд-4

.цол-мд-4 .оффсет-мд-4

.цол-мд-3 .оффсет-мд-3

.цол-мд-6 .оффсет-мд-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>

Поред брисања колона на одговарајућим тачкама прекида, можда ћете морати да ресетујете помаке. Погледајте ово у акцији у примеру мреже .

.цол-см-5 .цол-мд-6

.цол-см-5 .оффсет-см-2 .цол-мд-6 .оффсет-мд-0

.цол-см-6 .цол-мд-5 .цол-лг-6

.цол-см-6 .цол-мд-5 .оффсет-мд-2 .цол-лг-6 .оффсет-лг-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>

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

Са преласком на флекбок у в4, можете користити услужне програме за маргине као што су .me-autoда удаљите сродне колоне једну од друге.

.цол-мд-4

.цол-мд-4 .мс-ауто

.цол-мд-3 .мс-мд-ауто

.цол-ауто .ме-ауто

.цол-ауто

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Самосталне класе колона

Класе .col-*се такође могу користити изван а .rowда би се елементу дала одређена ширина. Кад год се класе колона користе као недиректне потомке реда, додаци се изостављају.

.цол-3: ширина од 25%

.цол-см-9: ширина од 75% изнад тачке прекида см

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Класе се могу користити заједно са услужним програмима за креирање прилагодљивих плутајућих слика. Обавезно умотајте садржај у .clearfixомотач да бисте очистили флоат ако је текст краћи.

Параграф текста чувара места. Овде га користимо да покажемо употребу класе цлеарфик. Овде додајемо неколико бесмислених фраза да бисмо демонстрирали како колоне овде ступају у интеракцију са лебдећом сликом.

Као што видите, параграфи се грациозно омотавају око лебдеће слике. Сада замислите како би ово изгледало са неким стварним садржајем овде, а не само са овим досадним текстом чувара места који траје и траје, али заправо не преноси никакве опипљиве информације. Једноставно заузима простор и не би требало да се чита.

Па ипак, ево вас, још увек истрајавате да читате овај текст чувара места, надајући се још неким увидима, или неком скривеном ускршњем јајету садржаја. Шала, можда. Нажалост, овде нема ништа од тога.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>