Bootstrap - CSS 网格

本章将讨论 Bootstrap CSS 网格。Bootstrap 的默认网格系统经过十多年的发展，已被广泛使用并被证明是有效的。它的创建没有现代 CSS 功能和技术，例如我们在当前浏览器中看到的新 CSS 网格。

怎么运行的

Bootstrap 5 引入了使用基于 CSS 网格的网格系统和附加 Bootstrap 功能的功能，以便使用不同的方法创建响应式布局。

  • 通过将$enable-grid-classes设置为false并启用 CSS 网格并将$enable-cssgrid设置为true来禁用默认网格系统后重新编译 Sass 。

  • 将.row实例替换为.grid。.grid类通过设置display: grid创建网格模板。

  • 不要使用.col-*类，而是使用.g-col-*类，因为 CSS 网格列使用grid-column属性而不是width。

  • 使用 CSS 变量--bs-columns和--bs-gap自定义父.grid的列和装订线大小。

主要差异

让我们看看 CSS 网格系统与标准网格系统相比的差异，如下所示：

  • Flex 实用程序对 CSS 网格列的影响是不同的。

  • 不要使用装订线，而是使用充当边距的间隙并替换网格系统中的水平填充。

  • 网格间隙会自动水平和垂直应用。与.row不同，.grid没有负边距，并且不能使用边距实用程序来调整装订线。请参阅定制部分。

  • 修饰符类应替换为内联和自定义样式（例如，style="--bs-columns: 3;"与class="row-cols-3"）。

  • 嵌套需要重置每个嵌套.grid实例的列计数。

三栏

使用.g-col-4为所有设备创建三个等宽列。使用基于视口大小的响应类根据视口大小修改布局。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Three Columns</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-4 bg-info p-2">First Column</div>
          <div class="g-col-4 bg-light p-2">Second Column</div>
          <div class="g-col-4 bg-warning p-2">Third Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

反应灵敏

要针对不同的屏幕尺寸调整布局，请使用响应式类。例如，从较小屏幕上的两列开始，然后在较大屏幕上扩展到三列。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h2 class="text-center">Responsive</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6 g-col-md-4 bg-info">First Column</div>
          <div class="g-col-6 g-col-md-4 bg-light">Second Column</div>
          <div class="g-col-6 g-col-md-4 bg-warning">Third Column</div>
        </div>
      </div>
    </div>
</body>
</html>

比较所有屏幕尺寸的两列布局。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Two Column Layout</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
        <div class="g-col-6 bg-info">First Column</div>
        <div class="g-col-6 bg-warning">Second Column</div>
      </div>
      </div>
    </div>
  </body>
  </html>

包装

当没有更多的水平空间时，网格项目会换行到下一行，并且间隙适用于水平和垂直间距。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Wrapping</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

开始

  • Start 类是 CSS Grid 的grid-column-start和grid-column-end属性的简写版本，用于通过指定列起点和终点来创建网格模板。

  • 它们与列类结合使用以调整列大小和对齐，从1开始，因为0不是这些属性的有效值。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Starts</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
            <div class="g-col-3 g-start-2 bg-info">First Column</div>
            <div class="g-col-4 g-start-6 bg-warning">Second Column</div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

自动列

如果网格项上没有任何类，它们将自动调整为 .grid 中的一列。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">Auto Column</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center">
        <div class="bg-info">First</div>
        <div class="bg-warning">Second</div>
        <div class="bg-info">Third</div>
        <div class="bg-warning">Four</div>
        <div class="bg-info">Five</div>
        <div class="bg-warning">Six</div>
        <div class="bg-info">Seven</div>
        <div class="bg-warning">Eight</div>
        <div class="bg-info">Nine</div>
        <div class="bg-warning">Ten</div>
      </div>
    </div>
  </div>
</body>
</html>

网格列类可以与此Behave相结合。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Auto Column</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6">First</div>
            <div>Second</div>
            <div>Third</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
        </div>
      </div>
    </div>
  </body>
  </html>

嵌套

CSS 网格系统支持.grid的简单嵌套，并且与默认网格不同，它继承了对行、列和间隙所做的修改。要实现嵌套，请考虑以下场景：

  • 默认列数被本地 CSS 变量覆盖：--bs-columns: 3。

  • 第一个自动列中的列数保持不变，每列占据总宽度的三分之一。

  • 在第二个自动列中将嵌套.grid的列数设置为 12（我们的默认值）。

  • 第三个自动列中没有嵌套项目。

与基本网格结构相比，这在实践中可以实现更复杂和自定义的布局。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Nesting</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center p-3" style="--bs-columns: 3;">
          <div class="bg-secondary text-white">
            First Auto-column
            <div class="grid p-3">
              <div class="bg-warning">1</div>
              <div class="bg-info">2</div>
            </div>
          </div>
          <div class="bg-secondary text-white">
            Second Auto-column
            <div class="grid  p-3" style="--bs-columns: 12;">
              <div class="g-col-6 bg-warning">1</div>
              <div class="g-col-4 bg-info">2</div>
              <div class="g-col-2 bg-warning">3</div>
            </div>
          </div>
          <div class="bg-secondary text-white">Third Auto-column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

定制

使用本地 CSS 变量自定义列数和行数以及间隙宽度。

多变的 回退值 描述
--bs-rows 1 网格模板中的行数
--bs-columns 12 网格模板中的列数
--bs-gap 1.5rem 柱之间间隙的大小（垂直和水平）

没有默认值的 CSS 变量使用后备值，直到指定本地实例。例如，var(--bs-rows, 1)用于 CSS 网格行，在定义--bs-rows时覆盖后备值 1。

没有网格类

.grid元素中的网格项将自动调整大小，而无需使用.g-col类。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">No Grid Classes</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center" style="--bs-columns: 3;">
        <div class="bg-info">First Column</div>
        <div class="bg-light">Second Column</div>
        <div class="bg-warning">Third Column</div>
      </div>
    </div>
  </div>
</body>
</html>

柱子和间隙

让我们修改列数和间距，如下所示：

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Column and Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
          <div class="g-col-2 bg-info">First Column</div>
          <div class="g-col-2 bg-warning">Second Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

使用 --bs-columns: 10 更改间隙和列数；和--bs-间隙：1rem；。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Column and Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-4 bg-warning">Second Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

添加行

以下示例演示了重新排列列并增加行数：

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Adding Rows</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
          <div class="bg-info">First Column</div>
          <div class="g-start-2 bg-light" style="grid-row: 2">Second Column</div>
          <div class="g-start-3 bg-warning" style="grid-row: 3">Third Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

差距

仅修改行间隙即可更改网格中的垂直间隙。在.grid上使用gap ，row-gap和column-gap可以根据需要调整。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="row-gap: 0;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

您可以使用内联样式或 CSS 变量--bs-gap为垂直和水平间隙指定单个或一对值。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-gap: .25rem 1rem;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

萨斯

CSS Grid 的一个缺点是编译后的 CSS 中生成的类的数量是由$grid-columns和$grid-gutter-width Sass 变量的值预先确定的。

  • 更改这些默认 Sass 变量后重新编译 CSS。

  • 要增强现有的类，请使用内联或自定义样式。

您可以使用内联样式和预定义的 CSS 网格列类（例如.g-col-4）修改列数、间隙大小和大小。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">Saas</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
        <div class="bg-info" style="grid-column: span 14;">First Column</div>
        <div class="g-col-4 bg-warning">Second Column</div>
      </div>
    </div>
  </div>
</body>
</html>