Колони

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

На тази страница

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

Как работят

Колоните се основават на flexbox архитектурата на мрежата. 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, този 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преминаване 5през всичките шест нива на мрежата.

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

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

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

Има също responsive .order-firstи .order-lastкласове, които променят orderна елемент чрез прилагане order: -1и order: 6съответно. Тези класове могат също да се смесват с номерираните .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 можете да използвате помощни програми за маржове, като например .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>