Bootstrap 简明教程

Bootstrap - Columns

本章将讨论 Bootstrap 列。flexbox 网格系统允许您使用各种对齐、排序和偏移选项来修改列。使用列类，您可以控制非网格项的宽度。

How it works

  1. 在网格的 flexbox 架构上，构建列。Flexbox 允许在行级别更改特定列和列组。

  2. 在创建网格布局时，所有内容都会放在列中。Bootstrap 网格的层次结构从 container 到行到列再到您的内容。当您组合内容和列时，可能会出现不可预见的后果。

  3. 为了生成响应式布局，Bootstrap 提供了预定义的类。每个网格层都有 six breakpoints 和十二列。Bootstrap 提供了许多类以创建您所需的布局。

Alignment

使用 flexbox 对齐实用程序垂直和水平对齐列。

Vertical alignment

使用垂直对齐实用程序更改元素的垂直对齐方式。

  1. 使用 align-items-start 类在起始位置垂直对齐内容。

  2. 使用 align-items-center 类在中间垂直对齐内容。

  3. 使用 align-items-end 类在末尾垂直对齐内容。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <h5>Align the content at start</h5>
      <div class="row align-items-start bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
      <h5 class="mt-2">Align the content at center</h5>
      <div class="row align-items-center bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
      <h5 class="mt-2">Align the content at end</h5>
      <div class="row align-items-end bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
    </div>
  </body>
  </html>

使用 .align-self- * 类别分别调整每列的对齐方式。

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-4">
        <div class="row  bg-warning" style="min-height: 80px;">
          <div class="col align-self-start bg-info">
            First Column
          </div>
          <div class="col align-self-center bg-info">
            Second Column
          </div>
          <div class="col align-self-end bg-info">
            Third Column
          </div>
        </div>
      </div>
    </body>
    </html>

Horizontal alignment

使用 justify-content- * 类别水平排列来改变水平排列。

  1. 使用 justify-content-start 从开头排列列。

  2. 使用 justify-content-center 将列对齐到中心。

  3. 使用 justify-content-end 将列对齐到结尾。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container text-center mt-4">
      <h5>Align the columns at start</h5>
      <div class="row justify-content-start bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Align the columns at center</h5>
      <div class="row justify-content-center bg-info mt-4" style="min-height: 40px;">
        <div class="col-4  bg-warning">
         First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Align the columns at end</h5>
      <div class="row justify-content-end bg-info mt-4" style="min-height: 40px;">
        <div class="col-4  bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second column
        </div>
      </div>
    </div>
  </body>
  </html>

  1. 使用 justify-content-around 平衡两列之间的间距。

  2. 使用 justify-content-between 增加两列之间的间距。

  3. 使用 justify-content-evenly 类别在两个所需列的右列和左列之间增加相等的空间。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center mt-4">
      <h5 class="mt-4">Add space between the two columns using justify-content-around</h5>
      <div class="row justify-content-around bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Add space between the two columns using justify-content-between.</h5>
      <div class="row justify-content-between bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Add equal space between columns using justify-content-evenly.</h5>
      <div class="row justify-content-evenly bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
    </div>
  </body>
  </html>

Column wrapping

如果一行中超过 12 列，则系统会自动换行到下一行，并作为一个单元格。

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <div class="row mt-2">
          <div class="col-2 bg-warning">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
          <div class="col-6 bg-info">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
          <div class="col-9 bg-primary">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
        </div>
      </div>
    </body>
    </html>

Column breaks

若要在 flexbox 中断开列到新行，请在希望断开行的列后添加带有 100% 宽度的 div 元素。这种情况通常发生在多个 .rows 中，尽管并非所有实现方法都适合这种情况。

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row mt-2">
          <div class="col-6 col-sm-3 bg-info">First Column</div>
          <div class="col-6 col-sm-3 bg-warning">Second Column</div>

          <div class="w-100"></div>

          <div class="col-6 col-sm-3 bg-primary">Third Column</div>
          <div class="col-6 col-sm-3 bg-secondary">Fourth Column</div>
        </div>
      </div>
    </body>
    </html>

您还可以使用 responsive display utilities 在特定断点处应用此断开。

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-2">
        <div class="row">
          <div class="col-6 col-sm-4  bg-info">First Column</div>
          <div class="col-6 col-sm-4  bg-warning">Second Column</div>

          <div class="w-100 d-none d-md-block"></div>

          <div class="col-6 col-sm-4 bg-primary">Third Column</div>
          <div class="col-6 col-sm-4 bg-light">Fourth Column</div>
        </div>
      </div>
    </body>
    </html>

Reordering

Bootstrap 的列顺序类会根据不同的屏幕尺寸来调整网格系统的顺序。

Order classes

使用 .order- classes 来控制内容的视觉顺序。由于这些类别是响应式的，因此，您可以按断点（例如 .order-2 order-md-3 ）对它们进行排序。包含所有网格层的 1 到 5 的值的支持。可以通过 Sass 变量来修改默认的 .order- * 类。

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row">
          <div class="col bg-info">
            no order applied.
          </div>
          <div class="col order-5 bg-warning">
            with an order of 5.
          </div>
          <div class="col order-1 bg-primary">
            with an order of 1.
          </div>
        </div>
      </div>
    </body>
    </html>

此外，响应式类别 .order-first 和 .order-last 可以分别使用 order: -1 和 order: 6 来重新排序元素。可以根据需要将这些类别与编号的 .order- * 类别相结合。

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</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">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-2">
        <div class="row">
          <div class="col order-last bg-info">
            First column as ordered last
          </div>
          <div class="col order-first bg-primary">
            Second column as ordered first
          </div>
          <div class="col bg-warning">
            Third column (unordered)
          </div>
        </div>
      </div>
    </body>
    </html>

Offsetting columns

网格列的偏移量可以通过两种方式实现：

  1. .offset- grid

  2. margin utilities

网格类的大小匹配列，而后，边距更适合于具有可变偏移宽度的快速布局。

Offset classes

使用 .offset-md- 类别将列从其原始位置向右侧移动。这些类别将 columns 添加到列的左边缘。 .offset-md-4 类别将 .col-md-4 向右移动四列。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-md-2 bg-info p-2">First Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-3 bg-warning p-2">Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-2 bg-info p-2">Third Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-4 bg-warning p-2">Fourth Column</div>
      </div>
    </div>
  </body>
  </html>

Column clearing at responsive breakpoints

需要在响应断点处重置偏移量来清除列。查看 grid example 以获得演示。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-sm-5 col-md-6 bg-warning">First Row First Column</div>
        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0 bg-info">First Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-sm-6 col-md-5 col-lg-6 bg-warning">Second Row First Column</div>
        <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0  bg-info">Second Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

Margin utilities

在版本 4 中，flexbox 允许您使用边距实用工具，例如 .me-auto 来将兄弟列相互分隔

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-md-4 bg-info"> First Row First Column</div>
        <div class="col-md-4 ms-auto bg-warning">First Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-3 ms-md-auto bg-info">Second Row First Column</div>
        <div class="col-md-3 ms-md-auto bg-warning">Second Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-auto me-auto bg-info">Third Row First Column</div>
        <div class="col-auto bg-warning">Third Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

Standalone column classes

若要针对元素提供特定宽度，请在 .row 外使用 .col- * 类。当列类用作行的非直接子元素时，省略填充。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="col-3 p-2 mb-2 bg-info">
     First Column
    </div>
    <div class="col-sm-6 p-2 bg-warning">
      Second Column
    </div>
  </body>
  </html>

若要创建响应式浮动图像，请与实用程序结合类。如果文本较短，请将其封装在 .clearfix 包装器中以清除浮动。

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="clearfix">
      <img src="\bootstrap\images\tut.png" class="col-sm-2 float-sm-end mb-2 ms-sm-2" alt="...">
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. create responsive floated images, combine the classes with utilities.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
    </div>
  </body>
  </html>