Колони

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

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

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

Како тие работат

Колоните се изградени на архитектурата на флексибкукс на мрежата. Flexbox значи дека имаме опции за менување поединечни колони и менување на групи колони на ниво на ред . Вие избирате како колоните растат, се намалуваат или на друг начин се менуваат.
Кога се градат распореди на мрежа, целата содржина оди во колони. Хиерархијата на мрежата на Bootstrap оди од контејнер до ред до колона до вашата содржина. Во ретки прилики, може да комбинирате содржина и колона, но имајте предвид дека може да има несакани последици.
Bootstrap вклучува предефинирани класи за креирање брзи распореди кои реагираат. Со шест точки на прекин и десетина колони на секое ниво на мрежа, имаме веќе изградени десетици класи за да ги креирате вашите посакувани распореди. Ова може да се оневозможи преку Sass ако сакате.

Порамнување

Користете ги алатките за порамнување на 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 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 колони се ставени во еден ред, секоја група дополнителни колони, како една единица, ќе се завитка во нова линија.

.col-9

.col-4
Бидејќи 9 + 4 = 13 > 12, оваа дивитација со 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преку 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преку четири колони.

.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, можете да користите алатки за маргина како .me-autoда ги принудувате колоните од браќата и сестрите да се оддалечат една од друга.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<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-*може да се користат и надвор од a .rowза да се даде на елементот специфична ширина. Секогаш кога класите на колони се користат како недиректни деца од редот, додатоците се испуштаат.

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

.col-sm-9: ширина од 75% над sm точката на прекин

<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обвивка за да го исчистите плови ако текстот е пократок.

Параграф текст на место за место. Ние го користиме овде за да ја прикажеме употребата на класата 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>