Kolumny

Dowiedz się, jak modyfikować kolumny, korzystając z kilku opcji wyrównania, porządkowania i odsuwania dzięki naszemu systemowi siatki flexbox. Ponadto zobacz, jak używać klas kolumn do zarządzania szerokościami elementów innych niż siatka.

Na tej stronie

Heads-up! Przed przystąpieniem do modyfikowania i dostosowywania kolumn siatki należy najpierw przeczytać stronę Siatka .

Jak oni pracują

Kolumny opierają się na architekturze flexbox siatki. Flexbox oznacza, że mamy opcje zmiany poszczególnych kolumn i modyfikacji grup kolumn na poziomie wiersza . Ty wybierasz, jak kolumny rosną, kurczą się lub w inny sposób zmieniają.
Podczas tworzenia układów siatki cała zawartość jest umieszczana w kolumnach. Hierarchia siatki Bootstrap przechodzi od kontenera do wiersza, kolumny, aż do zawartości. W rzadkich przypadkach możesz połączyć treść i kolumnę, ale pamiętaj, że mogą wystąpić niezamierzone konsekwencje.
Bootstrap zawiera predefiniowane klasy do tworzenia szybkich, responsywnych układów. Z sześcioma punktami przerwania i tuzinem kolumn na każdym poziomie siatki, mamy dziesiątki klas już stworzonych do tworzenia pożądanych układów. Można to wyłączyć przez Sass, jeśli chcesz.

Wyrównanie

Użyj narzędzi do wyrównywania flexbox, aby wyrównać kolumny w pionie i poziomie.

Wyrównanie w pionie

Jedna z trzech kolumn

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

Jedna z trzech kolumn

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

Wyrównanie w poziomie

Jedna z dwóch kolumn

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

Zawijanie kolumn

Jeśli w jednym rzędzie znajduje się więcej niż 12 kolumn, każda grupa dodatkowych kolumn, jako jedna jednostka, zawinie się w nowy wiersz.

.col-9

.col-4
Ponieważ 9 + 4 = 13 > 12, ten czterokolumnowy div jest umieszczany w nowej linii jako jedna ciągła jednostka.

.col-6
Kolejne kolumny są kontynuowane wzdłuż nowej linii.

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

Łamanie kolumn

Łamanie kolumn do nowej linii w flexboksie wymaga małego hacka: dodaj element z width: 100%dowolnym miejscem, w którym chcesz zawinąć kolumny do nowej linii. Zwykle odbywa się to za pomocą wielu .rows, ale nie każda metoda implementacji może to wyjaśnić.

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

Możesz również zastosować to przerwanie w określonych punktach przerwania za pomocą naszych narzędzi do responsywnego wyświetlania .

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

Zmiana kolejności

Zamów zajęcia

Użyj .order-klas do kontrolowania wizualnej kolejności treści. Te klasy są responsywne, więc możesz ustawić je orderwedług punktu przerwania (np .order-1.order-md-2. ). Obejmuje wsparcie dla 1wszystkich 5sześciu poziomów siatki.

Najpierw w DOM, bez zamówienia

Drugi w DOM, z większym zamówieniem

Trzecie miejsce w DOM, z rzędem 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>

Istnieją również responsywne .order-firsti .order-lastklasy, które zmieniają orderelement poprzez zastosowanie odpowiednio order: -1i order: 6. Klasy te można również mieszać z .order-*klasami ponumerowanymi w razie potrzeby.

Pierwszy w DOM, zamówiony ostatni

Drugi w DOM, nieuporządkowany

Trzeci w DOM, zamówiony jako pierwszy

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

Przesunięcie kolumn

Możesz przesunąć kolumny siatki na dwa sposoby: nasze responsywne .offset-klasy siatki i nasze narzędzia do tworzenia marginesów . Klasy siatki są dopasowane do kolumn, podczas gdy marginesy są bardziej przydatne w przypadku szybkich układów, w których szerokość przesunięcia jest zmienna.

Klasy offsetowe

Przenieś kolumny w prawo za pomocą .offset-md-*klas. Te klasy zwiększają lewy margines kolumny o *kolumny. Na przykład .offset-md-4porusza się .col-md-4po czterech kolumnach.

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

Oprócz czyszczenia kolumn w responsywnych punktach przerwania może być konieczne zresetowanie odsunięć. Zobacz to w akcji w przykładzie siatki .

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

Narzędzia depozytowe

Po przejściu na flexbox w wersji 4 możesz używać narzędzi do marżowania, takich jak .me-autoodsuwanie od siebie kolumn rodzeństwa.

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

Samodzielne klasy kolumn

Klasy .col-*mogą być również używane poza a, .rowaby nadać elementowi określoną szerokość. Ilekroć klasy kolumn są używane jako niebezpośrednie dzieci wiersza, dopełnienia są pomijane.

.col-3: szerokość 25%

.col-sm-9: szerokość 75% powyżej punktu przerwania 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>

Klasy mogą być używane razem z narzędziami do tworzenia responsywnych obrazów pływających. Pamiętaj, aby zawinąć zawartość w .clearfixopakowanie, aby wyczyścić pływak, jeśli tekst jest krótszy.

Akapit tekstu zastępczego. Używamy go tutaj, aby pokazać użycie klasy clearfix. Dodajemy tutaj sporo bezsensownych fraz, aby zademonstrować, w jaki sposób kolumny oddziałują tutaj z pływającym obrazem.

Jak widać, akapity wdzięcznie owijają się wokół pływającego obrazu. Teraz wyobraź sobie, jak by to wyglądało z jakąś rzeczywistą treścią tutaj, a nie tylko z tym nudnym tekstem zastępczym, który ciągnie się w nieskończoność, ale w rzeczywistości nie przekazuje żadnych namacalnych informacji. Po prostu zajmuje miejsce i nie powinno się go czytać.

A jednak tutaj jesteś, wciąż wytrwale czytając ten tekst zastępczy, mając nadzieję na więcej spostrzeżeń lub ukrytą wielkanocną treść. Może żart. Niestety nic z tego tutaj nie ma.

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