Давайте создадим базовую сетку, которая сначала будет располагаться на очень маленьких устройствах, а затем станет горизонтальной на более крупных устройствах.
В следующем примере показан простой макет из двух столбцов «сложенный по горизонтали». Это означает, что он приведет к разделению 50%/50% на всех экранах, за исключением очень маленьких экранов, которые будут автоматически сложены (100%):
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Grid Example</h1>
<p>This example demonstrates a 50%/50% split on small, medium, large, xlarge and xxlarge devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary text-white p-3">
Lorem ipsum...
</div>
<div class="col-sm-6 bg-dark text-white p-3">
Sed ut perspiciatis...
</div>
</div>
</div>
</body>
</html>
Совет. Числа в классах .col-sm-*
указывают, сколько столбцов должен охватывать элемент div (из 12). Итак, .col-sm-1
занимает 1 столбец, .col-sm-4
охватывает 4 столбца, .col-sm-6
охватывает 6 столбцов и т. д.
Примечание. Убедитесь, что сумма в сумме равна 12 или меньше (не обязательно использовать все 12 доступных столбцов):
Совет. Вы можете превратить любой макет полной ширины в макет фиксированной ширины адаптивного, изменив Совет. код class="w3-codespan">.container-fluid в .container
:
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Grid Example</h1>
<p>This example demonstrates a 50%/50% split on small, medium, large, xlarge and xxlarge devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary text-white p-3">
Lorem ipsum...
</div>
<div class="col-sm-6 bg-dark text-white p-3">
Sed ut perspiciatis...
</div>
</div>
</div>
</body>
</html>
В Bootstrap 5 есть простой способ создать столбцы одинаковой ширины для всех устройств: просто удалите число из .col-size-*
и используйте класс .col-size
только для указанного количества элементов col. Bootstrap распознает количество столбцов, и каждый столбец будет иметь одинаковую ширину. Классы size (sm, md и т. д.) определяют, когда столбцы должны быть отзывчивыми:
<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Auto Layout Columns</h1>
<p>In Bootstrap 5, there is an easy way to create equal width columns: just use the <code>.col-size</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
<p>Two columns: 50% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 2</div>
<div class="col-sm bg-dark text-white p-3">2 of 2</div>
</div>
</div>
<br>
<p>Four columns: 25% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 4</div>
<div class="col-sm bg-dark text-white p-3">2 of 4</div>
<div class="col-sm bg-primary text-white p-3">3 of 4</div>
<div class="col-sm bg-dark text-white p-3">4 of 4</div>
</div>
</div>
</div>
</body>
</html>