Bootstrap 简明教程

Bootstrap - Position

本节讨论 .position 实用程序类，用于快速配置元素的位置。

Position values

.position 类可用于快速定位，但它们本质上无响应。

position 类的各种值如下：

  1. .position-static

  2. .position-relative

  3. .position-absolute

  4. .position-fixed

  5. .position-sticky

我们看一个示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</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 class="m-2">
	  <h4 class="mb-4">Position values</h4>
	  <div class="container mt-4 bg-light border border-dark">
		  Position: static states that the top, right,
		  bottom, and left properties will be the same no matter
		  <p class="position-static bg-info top-50 start-50 text-light">position: static</p>
		  This part is out of the paragraph.
	  </div>
	  <div class="container mt-4 bg-light border border-dark">
		  Position: relative sets its position to be relative
		  with respect to the elements on top of it
		  <p class="position-relative bg-success top-50	start-50 text-light w-50">
			position: relative;
		  </p>
		  This means that the top, right, bottom, and
		  left properties will
		  affect the position of the Paragraph.
	  </div>
	  <div class="container mt-4 bg-light border border-dark">
		  Position: absolute sets its position relative to
		  the closest parent and it set its position absolute
		  with that.
		  <p class="position-absolute bg-warning bottom-0 end-50 text-light">
			position: absolute;
		  </p>
		  This means that the top, right, bottom, and left
		  properties will get adjusted with respect to the
		  nearest ancestor and then the position is set.
	  </div>
  </body>
</html>

Arrange elements

可以轻松使用边缘定位实用程序类来安排元素。

安排元素的格式为 {property}-{position} 。

其中 property 可以具有以下值：

property

description

top

vertical top position

start

horizontal left position (LTR)

bottom

vertical bottom position

end

horizontal right position (LTR)

其中 position 可以具有以下值：

position

description

0

0 edge position

50

50% edge position

100

100% edge position

可以通过向 $position-values Sass 映射变量添加条目来添加更多位置值。

让我们看一个使用 .position- * 类的元素排列示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</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 class="container p-3 m-5">
      <div class="position-absolute top-0 start-0 mb-2">
        <button type="button" class="btn btn-primary">top-0 start-0</button>
      </div>
      <div class="position-absolute top-50 start-50 mb-2">
        <button type="button" class="btn btn-secondary">top-50 start-50</button>
      </div>
      <div class="position-absolute top-0 end-0 mb-2">
        <button type="button" class="btn btn-success">top-0 end-0</button>
      </div>
      <div class="position-absolute bottom-0 start-0 mb-2">
        <button type="button" class="btn btn-warning">bottom-0 start-0</button>
      </div>
      <div class="position-absolute bottom-50 end-50 mb-2">
        <button type="button" class="btn btn-danger">bottom-50 end-50</button>
      </div>
      <div class="position-absolute bottom-0 end-0 mb-2">
        <button type="button" class="btn btn-info">bottom-0 end-0</button>
      </div>
    </div>
  </body>
</html>

Center elements

  1. 使用变换实用程序类 .translate-middle ，你可以将元素排列在中心。

  2. 变换类将变换 translateX(-50%) 和 translateY(-50%) 应用于元素。

  3. 然后这个元素会与边缘定位实用程序结合，从而使元素居中。

我们看一个示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</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>
    <style>
      span {
          border: 2px solid rgb(26, 58, 241);
          padding: 30px;
          background:#1ae3f1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="position-absolute top-0 start-0 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-0 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-0 start-100 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-0 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-100 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-100 start-0 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-100 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-100 start-100 translate-middle">
        <span></span>
      </div>
    </div>
  </body>
</html>

使用 .translate-middle-x 或 .translate-middle-y 类，以便仅在水平或垂直方向上放置元素。

我们看一个示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</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>
    <style>
      span {
          border: 2px solid rgb(26, 58, 241);
          padding: 30px;
          background:#dd1c8c;
      }
    </style>
  </head>
  <body>
    <div class="position-static">
      <div class="position-absolute top-0 start-0">
        <span></span>
      </div>
      <div class="position-absolute top-0 start-50 translate-middle-x">
        <span></span>
      </div>
      <div class="position-absolute top-0 end-0">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-0 translate-middle-y">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 end-0 translate-middle-y">
        <span></span>
      </div>
      <div class="position-absolute bottom-0 start-0">
        <span></span>
      </div>
      <div class="position-absolute bottom-0 start-50 translate-middle-x">
        <span></span>
      </div>
      <div class="position-absolute bottom-0 end-0">
        <span></span>
      </div>
    </div>
  </body>
</html>

Few more examples

下面显示了更多示例，其中 .position 类与 Bootstrap 提供的其他实用程序类一起使用：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</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="d-flex p-5 gap-5">
    <button type="button" class="btn btn-success position-relative">
      Notifications<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"><span class="visually-hidden">unread messages</span></span>
    </button>
    <button type="button" class="btn btn-primary position-relative">
      Inbox
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
        <span class="visually-hidden">unread messages</span>
      </span>
    </button>
    <button type="button" class="btn btn-warning position-relative">
      Messages <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
    </button>
    </div>
  </body>
</html>

这些类可与其他 Bootstrap 组件一起使用以创建新组件。

我们来看一个使用 progress-bar 和 .position 实用程序类的示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</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 class="mb-5 p-3">
    <h2 class="text-center">Position</h2>
    <div>
        <div class="position-relative m-4">
            <div class="progress" >
                <div class="progress-bar" role="progressbar"></div>
            </div>
            <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-success rounded-pill">1</button>
            <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-warning rounded-pill">2</button>
            <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-info rounded-pill">3</button>
            <button type="button" class="position-absolute top-50 end-50 translate-middle btn btn-sm btn-danger rounded-pill">4</button>
        </div>
    </div>
  </body>
</html>