Bootstrap 5:网格系统


目录

    显示目录

网格系统

Bootstrap 的网格系统是用 Flexbox 构建的,页面上最多允许 12 列。

如果您不想单独使用所有 12 列,可以将这些列分组在一起以创建更宽的列:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

网格系统具有响应能力,并且列将根据屏幕尺寸自动重新排列。

确保总和等于或小于 12(不需要使用所有 12 个可用列)。

网格类

Bootstrap 5 网格系统有六类:

  • .col-(超小型设备 - 屏幕宽度小于 576 像素)

  • .col-sm-(小型设备 - 屏幕宽度等于或大于 576 像素)

  • .col-md-(中型设备 - 屏幕宽度等于或大于 768 像素)

  • .col-lg-(大型设备 - 屏幕宽度等于或大于 992 像素)

  • .col-xl-(超大设备 - 屏幕宽度等于或大于 1200 像素)

  • .col-xxl-(xxlarge 设备 - 屏幕宽度等于或大于 1400 像素)

可以组合上面的类来创建更加动态和灵活的布局。

提示:每个类都会按比例放大,因此如果您想为 sm 设置相同的宽度md,只需指定sm即可。

Bootstrap 5 网格的基本结构

以下是 Bootstrap 5 网格的基本结构:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></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>Basic Grid Structure</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
  
  <!-- Control the column width, and how they should appear on different devices -->
  <div class="row">
    <div class="col-sm-6 bg-primary text-white">50%</div>
    <div class="col-sm-6 bg-dark text-white">50%</div>
  </div>
  <br>
    
  <div class="row">
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
    <div class="col-sm-4 bg-dark text-white">33.33%</div>
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
  </div>
  <br>

  <!-- Or let Bootstrap automatically handle the layout -->
  <div class="row">
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
  </div>
  <br>
    
  <div class="row">
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
  </div>
</div>

</body>
</html>

第一个示例:创建一行 (<div class="row">)。然后,添加所需数量的列(具有适当 .col-*-* 类的标签)。第一个星号 (*) 代表响应能力:sm、md、lg、xl 或 xxl,而第二个星号代表一个数字,每行加起来应为 12。

第二个示例:不要向每个 col 添加数字,而是让 bootstrap 处理布局,以创建等宽的列:两个 " col" 元素=每列 50% 宽度,而三列=每列 33.33% 宽度。四列=25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列响应。

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同屏幕尺寸上工作:

  Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large (>=1200px) XXL (>=1400px)
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px 1320px
Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and Desktops Laptops and Desktops
# of columns 12 12 12 12 12 12
Gutter width 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column)
Nestable Yes Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes Yes