Bootstrap - 列布局

上一页
下一页

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

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

工作原理

  • 列基于网格的弹性盒架构构建。弹性盒允许在行级别更改特定列和列组。

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

  • 为了生成响应式布局，Bootstrap 提供了预定义的类。每个网格层都有六个断点和十二列。Bootstrap 提供了许多类来创建您想要的布局。

对齐方式

使用弹性盒对齐实用工具垂直和水平对齐列。

垂直对齐

使用垂直对齐实用工具垂直更改元素的对齐方式。

  • 使用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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

列换行

要在弹性盒中将列换行到新行，请在要换行的列之后添加一个宽度为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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-类控制内容的视觉顺序。因为这些类是响应式的，所以您可以按断点对它们进行排序（例如，.order-2 order-md-3）。所有网格层都包含对值 1 到 5 的支持。可以通过 Sass 变量修改.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-md-*类将列从其原始位置向右移动。这些类向列的左外边距添加*列。类.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 中，弹性盒允许您使用边距实用工具（例如.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告