Bootstrap - 位置

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

位置值

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

职位类别的各种值如下：

  • .位置静态

  • .位置相对

  • .绝对位置

  • .位置固定

  • .位置粘性

让我们看一个例子：

例子

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

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

排列元素

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

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

其中属性可以包含以下值：

财产 描述
顶部 垂直顶部位置
开始 水平左侧位置 (LTR)
底部 垂直底部位置
结尾 水平右侧位置 (LTR)

其中位置可以保存以下值：

位置 描述
0 0 边缘位置
50 50% 边缘位置
100 100% 边缘位置

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

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

例子

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

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

中心元件

  • 使用转换实用程序类.translate-middle，您可以将元素排列在中心。

  • 转换类将转换translateX(-50%)和translateY(-50%)应用于元素。

  • 然后，该元素与边缘定位实用程序结合，从而使元素居中。

让我们看一个例子：

例子

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

<!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类，以便仅在水平或垂直方向定位元素。

让我们看一个例子：

例子

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

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

再举几个例子

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

例子

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

<!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 组件一起使用来创建新的类。

让我们看一个将进度条与.position实用程序类一起使用的示例：

例子

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

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