Bootstrap 5 栅格

听海边涛声

已于 2024-08-27 14:57:19 修改

阅读量767

点赞数 8

文章标签： bootstrap 前端 html

于 2024-08-27 14:47:03 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141597547

版权

https://v5.bootcss.com/docs/layout/grid/

Bootstrap 5 提供了强大的、移动优先的弹性盒（flexbox ）栅格系统来构建各种形状和大小的布局，这要归功于一个十二列系统、六个默认响应层、sass变量和混合（mixin）以及几十个预定义类。

Bootstrap的栅格系统使用一系列容器、行和列来布局和对齐内容，它基于flexbox构建并且完全响应式。

示例

在这里插入图片描述

上面的示例使用预定义的栅格类在所有设备和视口上创建了三个等宽的列。这些列通过父级.container在页面中居中对齐。

栅格系统是如何工作的

栅格支持六个响应式断点。断点基于min-width媒体查询，这意味着它们会影响该断点及其上面的所有断点（例如，.col-sm-4适用于sm、md、lg、xl和xxl）。这意味着你可以控制每个断点的容器和列的大小和行为。
容器会居中并对齐内容进行水平填充（称为排水沟）。使用.container获得响应式像素宽度，使用.container-fluid在所有视口和设备上获得100%的宽度，或使用响应式容器（例如，.container-md）获得fluid和像素宽度的组合。
行是列的包装器。每列都有水平填充，用于控制它们之间的空间。然后，在行上使用负边距来抵消这种填充，以确保列中的内容在视觉上沿着左侧对齐。行还支持修饰符类，以统一应用列大小和排水沟（gutter）类，以更改内容的间距。
列非常灵活。每行有12个模板列可用，允许创建跨越任意数量列的元素组合。列类指示要跨越的模板列数（例如，col-4跨越4列）。宽度以百分比设置，因此你始终具有相同的相对大小。
排水沟（gutter）也是响应式的和可定制的。在所有断点上都有可用的排水沟类，与我们的边距和填充间距具有相同的大小。使用.gx-*类更改水平排水沟，使用.gy-*更改垂直排水沟，或使用.g-*类更改所有排水沟。.g-0也可用于移除排水沟。

格栅选项

bootstrap的栅格系统可以在所有六个默认断点以及你自定义的任何断点上进行适配。六个默认的栅格层如下：

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

以下是栅格在这些断点上的变化方式：
在这里插入图片描述

自动布局的列

利用特定断点的列类可以轻松调整列的大小，而无需使用像.col-sm-6这样的显式编号类。

相等宽度

例如，下面是两个适用于从xs到xxl的每个设备和视口的网格布局。为你需要的每个断点添加任意数量的无单位类，每列的宽度将相同。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col">第1行第1列</div>
      <div class="col">第1行第2列</div>
    </div>
    <div class="row">
      <div class="col">第2行第1列</div>
      <div class="col">第2行第2列</div>
      <div class="col">第2行第3列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

设置1列的宽度

flexbox栅格列的自动布局也意味着你可以设置一个列的宽度，并让相邻的列围绕它自动调整大小。你可以使用预定义的栅格类（如下所示）、栅格mixin或内联宽度。请注意，无论中间列的宽度如何，其它列都会调整大小。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col">第1行第1列</div>
      <div class="col-6">第1行第2列</div>
      <div class="col">第1行第3列</div>
    </div>
    <div class="row">
      <div class="col">第2行第1列</div>
      <div class="col-5">第2行第2列</div>
      <div class="col">第2行第3列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

可变宽度内容

使用col-{断点}-auto类根据其内容的自然宽度调整列的大小。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row justify-content-md-center">
      <div class="col">第1列</div>
      <div class="col-md-auto">在CSS中，列之间的空白空间通常称为“排水沟”,排水沟是由于块级元素的上边缘和下边缘与其它内容生成的空白间隔所导致的</div>
      <div class="col col-lg-2">第3列</div>
    </div>
    <div class="row">
      <div class="col">第1列</div>
      <div class="col-md-auto">全国小学初中三学科启用新教材！先在起始年级使用，</div>
      <div class="col col-lg-2">第3列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

响应类

bootstrap的栅格包括六个层级的预定义类，用于构建复杂的响应式布局。根据需要自定义超小、小、中、大或超大设备上的列大小。

所有断点

对于从最小的设备到最大的设备都相同的网格，使用.col和.col-*类。当需要一个特定大小的列时，指定一个编号类；否则，请坚持使用.col。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
    </div>
    <div class="row">
      <div class="col-8">占8份的列</div>
      <div class="col-4">占4份的列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

堆叠到水平

使用一组.col-sm-*类，你可以创建一个基本的栅格系统，它从堆叠开始，在小断点（sm）处变为水平。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col-sm-8">col-sm-8</div>
      <div class="col-sm-4">col-sm-4</div>
    </div>
    <div class="row">
      <div class="col-sm">col-sm</div>
      <div class="col-sm">col-sm</div>
      <div class="col-sm">col-sm</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

混合和匹配

不希望你的列在某些栅格层中简单地堆叠吗？根据需要，为每个层级使用不同类的组合。参见下面的示例以更好地了解其工作原理。

通过使一个列全宽，另一个列半宽，在移动设备上堆叠列

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <!-- 通过使一个列全宽，另一个列半宽，在移动设备上堆叠列 -->
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

移动设备上列的起始宽度为50%，桌面设备上增加到33.3%

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

列在移动设备和桌面设备上始终是50%宽

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

行列

使用响应式.row-cols-*类快速设置最能呈现你的内容和布局的列数。而普通的.col-* 类应用于单个列（例如，.col-md-4），行列类是在父级.row上设置的快捷方式。使用.row-cols-auto，可以让列保持其自然宽度。

每行两列

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row row-cols-2">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

每行3列

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row row-cols-3">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

设置每列保持它们的自然宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row row-cols-auto">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

设置每行4列

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row row-cols-4">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

设置每行4列，但在其中一列上设置了占6份

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row row-cols-4">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col-6">列</div>
      <div class="col">列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

根据不同的视口设置每行不同的列数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
      <div class="col">列</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>

在这里插入图片描述

嵌套

要使用默认栅格嵌套内容，请在现有的.col-sm-*列中添加一个新的.row和一组.col-sm-*列。嵌套的行应包含一组总和为12或更少的列（不要求你使用所有12个可用列）。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col-sm-3">第一层: .col-sm-3</div>
      <div class="col-sm-9">
        <div class="row">
          <div class="col-8 col-sm-6">第二层: .col-sm-6</div>
          <div class="col-4 col-sm-6">第二层: col-4. .col-sm-6</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</body>

</html>