Bootstrap 简明教程
Bootstrap - Columns
本章将讨论 Bootstrap 列。flexbox 网格系统允许您使用各种对齐、排序和偏移选项来修改列。使用列类，您可以控制非网格项的宽度。
This chapter will discuss about Bootstrap columns. The flexbox grid system allows you to modify columns with various alignment, ordering, and offsetting options. Using column classes, you can control the widths of non-grid items.
How it works
-
On the flexbox architecture of the grid, columns are built. Flexbox allows changing of specific columns and groups of columns at the row level.
-
When creating grid layouts, all content is placed in columns. Bootstrap grid’s hierarchy goes from the container to the row to the column to your content. There may be unforeseen repercussions when you combine the content and column.
-
For generating responsive layouts, Bootstrap provides predefined classes. Each grid tier has six breakpoints and a dozen of columns. Bootstrap provides many classes to create your desired layouts.
Alignment
使用 flexbox 对齐实用程序垂直和水平对齐列。
Align columns vertically and horizontally using flexbox alignment utilities.
Vertical alignment
使用垂直对齐实用程序更改元素的垂直对齐方式。
Use vertical-alignment utilities to changes the alignment of elements vertically.
-
Use the align-items-start class to align content vertically at starting position.
-
Use the align-items-center class to align content vertically at center.
-
Use the align-items-end class to align content vertically at the end.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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- * 类别分别调整每列的对齐方式。
Adjust the alignment of each column separately using .align-self-* classes.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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- * 类别水平排列来改变水平排列。
Horizontal alignment can be alter using justify-content-* classes to align the columns horizontally.
-
Use justify-content-start to align columns from start.
-
Use justify-content-center to align columns at the center.
-
Use justify-content-end to align columns at the end.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>-
Use justify-content-around to equalise the spacing around the two columns.
-
Use justify-content-between to add space between the two columns.
-
Use justify-content-evenly class to add an equal space between the right and left columns of two desired columns.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 列，则系统会自动换行到下一行，并作为一个单元格。
If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 中，尽管并非所有实现方法都适合这种情况。
To break the column to a new line in flexbox, add a div element with a 100% width, after the column where you want to break the row. This normally occurs with multiple .rows, although not all implementation methods are suitable for this.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 在特定断点处应用此断开。
You can also use responsive display utilities to apply this break at particular breakpoints.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 的列顺序类会根据不同的屏幕尺寸来调整网格系统的顺序。
Bootstrap’s column order classes adjust the grid system’s order based on various screen sizes.
Order classes
使用 .order- classes 来控制内容的视觉顺序。由于这些类别是响应式的，因此，您可以按断点（例如 .order-2 order-md-3 ）对它们进行排序。包含所有网格层的 1 到 5 的值的支持。可以通过 Sass 变量来修改默认的 .order- * 类。
The visual order of your content is controlled using .order- classes. Because these classes are responsive, you can sort them by breakpoint (e.g., .order-2 order-md-3). Support for values 1 to 5 across all grid tiers is included. The default number of .order-* classes can be modified via Sass variable.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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- * 类别相结合。
Additionally, the responsive classes .order-first and .order-last can be used to reorder elements by using order: -1 and order: 6, respectively. You can combine these classes with numbered .order-* classes as required.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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
网格列的偏移量可以通过两种方式实现：
The grid columns offset can be achieved in two ways:
-
.offset- grid
网格类的大小匹配列，而后，边距更适合于具有可变偏移宽度的快速布局。
Grid classes are sized to match columns, While margins are more suitable for quick layouts with variable offset width.
Offset classes
使用 .offset-md- 类别将列从其原始位置向右侧移动。这些类别将 columns 添加到列的左边缘。 .offset-md-4 类别将 .col-md-4 向右移动四列。
Use .offset-md- classes to shift the columns from their original position to the right side. These classes add columns to the left margin of a column. The class .offset-md-4 shifts .col-md-4 to the right by four columns.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 以获得演示。
You need to reset the offsets at responsive breakpoints to clear columns. View the grid example for a demonstration.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 来将兄弟列相互分隔
In version 4, flexbox allows you to utilize margin utilities such as .me-auto to separate sibling columns from each other
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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- * 类。当列类用作行的非直接子元素时，省略填充。
To provide a specific width for an element, use .col-* classes outside a .row. The paddings are omitted when column classes are used as non-direct children of a row.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 包装器中以清除浮动。
To create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>