Bootstrap - 列

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

在学习如何更改和自定义网格列之前，请务必先阅读网格页面。

怎么运行的

在网格的 Flexbox 架构上，构建了列。Flexbox 允许在行级别更改特定列和列组。
创建网格布局时，所有内容都放置在列中。Bootstrap 网格的层次结构从容器到行到列再到内容。当您将内容和专栏结合起来时，可能会产生不可预见的影响。
为了生成响应式布局，Bootstrap 提供了预定义的类。每个网格层都有六个断点和十几个列。Bootstrap 提供了许多类来创建您想要的布局。

结盟

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

垂直对齐

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

使用align-items-start类在起始位置垂直对齐内容。
使用align-items-center类将内容垂直居中对齐。
使用align-items-end类在末尾垂直对齐内容。

例子

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

  <!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-*类分别调整每列的对齐方式。

例子

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

    <!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>

水平对齐

可以使用justify-content-*类来更改水平对齐方式以水平对齐列。

使用justify-content-start从头开始对齐列。
使用justify-content-center将列居中对齐。
使用justify-content-end在末尾对齐列。

例子

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

  <!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>

使用justify-content-around来均衡两列周围的间距。
使用justify-content- Between在两列之间添加空间。
使用justify-content-evenly类在两个所需列的左右列之间添加相等的间距。

例子

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

  <!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>

列环绕

如果一行中的列超过 12 列，它们将作为一个单元自动换行到下一行。

例子

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

    <!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>

分栏符

要在 Flexbox 中将列拆分为新行，请在要拆分行的列后面添加一个宽度为 100% 的div元素。这通常发生在多个.rows中，尽管并非所有实现方法都适合于此。

例子

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

    <!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>

您还可以使用响应式显示实用程序在特定断点处应用此中断。

例子

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

    <!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>

重新排序

Bootstrap 的列顺序类根据各种屏幕尺寸调整网格系统的顺序。

订单类别

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

例子

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

    <!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-*类组合起来。

例子

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

    <!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>

偏移列

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

.offset-网格
保证金效用

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

偏移类

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

例子

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

  <!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>

在响应断点处清除列

您需要重置响应断点处的偏移量以清除列。查看网格示例以进行演示。

例子

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

  <!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>

保证金效用

在版本 4 中，flexbox 允许您利用边距实用程序（例如.me-auto）将兄弟列彼此分开

例子

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

  <!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>

独立列类

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

例子

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

  <!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包装器中以清除浮动。

例子

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

  <!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>