让我们创建一个基本的网格系统,该系统一开始堆叠在超小型设备上,然后在较大的设备上变成水平的。
以下示例显示了一个简单的“堆叠到水平”两列布局,这意味着它将在所有屏幕上产生 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 元素上使用 .col-size
类。 Bootstrap 将识别有多少列,并且每列将获得相同的宽度。 大小类(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>