Bootstrap 简明教程

Bootstrap - Float

本章讨论了实用程序类 .float-

This chapter discusses about the utility class .float-*.

Overview

  1. The .float class is used to control the positioning and alignment of elements within a grid system.

  2. It is primarily used in conjunction with the grid system’s column classes to create responsive layouts.

  3. The .float classes help in floating an element to the left or right, or disable floating, as per the current viewport size.

  4. These utility classes use the same viewport breakpoints as the grid system.

  5. The .float utility classes have no effect on flex items.

Bootstrap 中提供的 .float 类如下:

The .float classes available in Bootstrap are as follows:

  1. .float-start - This class is used to float an element to the left within a grid column.

  2. .float-end - This class is used to float an element to the right within a grid column.

  3. .float-none - This class does not apply any float class to the element.

我们看一个示例:

Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Float</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 mt-3">
    <h4>Float utilities</h4>
    <div class="float-start">
      <button class="btn btn-success">Float start (on left)</button>
    </div>
    <div class="float-end">
      <button class="btn btn-primary">Float end (on right)</button>
    </div>
    <div class="float-none">
      <button class="btn btn-warning">Float none</button>
    </div>
  </body>
</html>

Responsive

每个 .float 值可以应用于视口的全部响应变化,例如 sm, md, lg, xlxxl

Each .float value can be applied to all the responsive variations of viewports, such as, sm, md, lg, xl and xxl.

以下是全部支持的 .float 类的列表:

Here is the list of all the support .float classes:

  1. .float_start

  2. .float_end

  3. .float_none

  4. .float_sm_start

  5. .float_sm_end

  6. .float_sm_none

  7. .float_md_start

  8. .float_md_end

  9. .float_md_none

  10. .float_lg_start

  11. .float_lg_end

  12. .float_lg_none

  13. .float_xl_start

  14. .float_xl_end

  15. .float_xl_none

  16. .float_xxl_start

  17. .float_xxl_end

  18. .float_xxl_none

Note: 请调整浏览器大小,以查看文本浮动。

Note: Kindly resize the browser, to see the floating of text.

让我们在不同视口上看一个这些实用程序类的示例:

Let us see an example of these utility classes on various viewports:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Float</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 mt-3">
    <h4><u>Responsive float utilities</u></h4>

      <div class="float-sm-start p-2 text-primary">
          The text floats to the left when the screen size is small or wider.
      </div>

      <div class="float-md-end p-2 text-success">
          The text floats to the right when the screen size is medium or wider.
      </div>

      <div class="float-lg-none p-2 text-danger">
          The text does not float to the right when the screen size is large or wider.
      </div>

      <div class="float-xl-end p-2 text-info">
          The text floats to the right when the screen size is extra large or wider.
      </div>
      </div>
  </body>
</html>