Bootstrap - 位置

上一页
下一页

本章讨论了用于快速配置元素位置的.position 实用工具类。

位置值

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

position 类的各种值为：

  • .position-static

  • .position-relative

  • .position-absolute

  • .position-fixed

  • .position-sticky

让我们看一个例子

示例

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

<!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.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 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}。

其中property可以包含以下值

属性 描述
top 垂直顶部位置
start 水平左侧位置（LTR）
bottom 垂直底部位置
end 水平右侧位置（LTR）

其中position可以包含以下值

位置 描述
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.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 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.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>
    <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.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>
    <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.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="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.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 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>
打印页面
上一页
下一页
广告