Kontenery
Kontenery są podstawowym elementem konstrukcyjnym Bootstrap, które zawierają, uzupełniają i wyrównują zawartość w obrębie danego urządzenia lub rzutni.
Jak oni pracują
Kontenery są najbardziej podstawowym elementem układu w Bootstrap i są wymagane podczas korzystania z naszego domyślnego systemu siatki . Kontenery służą do przechowywania, wypełniania i (czasami) centrowania zawartości w nich. Chociaż kontenery mogą być zagnieżdżone, większość układów nie wymaga zagnieżdżonego kontenera.
Bootstrap zawiera trzy różne pojemniki:
.container
, który ustawia amax-width
w każdym responsywnym punkcie przerwania.container-fluid
, który jestwidth: 100%
we wszystkich punktach przerwania.container-{breakpoint}
, czyliwidth: 100%
do określonego punktu przerwania
Poniższa tabela ilustruje max-width
porównanie każdego kontenera z oryginałem .container
oraz .container-fluid
w każdym punkcie przerwania.
Zobacz je w akcji i porównaj w naszym przykładzie siatki .
Bardzo mały <576px |
Mały ≥576 pikseli |
Średni ≥768px |
Duży ≥992px |
Bardzo duże ≥1200px |
XX-duży ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Domyślny kontener
Nasza domyślna .container
klasa to responsywny kontener o stałej szerokości, co oznacza, że max-width
zmienia się on w każdym punkcie przerwania.
<div class="container">
<!-- Content here -->
</div>
Responsywne kontenery
Kontenery responsywne pozwalają określić klasę, która jest w 100% szeroka, aż do osiągnięcia określonego punktu przerwania, po czym stosujemy max-width
s dla każdego z wyższych punktów przerwania. Na przykład .container-sm
ma szerokość 100%, aby rozpocząć, aż do osiągnięcia sm
punktu przerwania, w którym zostanie skalowany za pomocą md
, lg
, xl
i xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Pojemniki na płyn
Użyj .container-fluid
dla kontenera o pełnej szerokości, obejmującego całą szerokość widocznego obszaru.
<div class="container-fluid">
...
</div>
Sass
As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in _variables.scss
) that powers them:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.