Bootstrap 简明教程

Bootstrap - Position

本章讨论元素位置的配置。

This chapter discusses about configuration of position of an element.

Bootstrap 提供了一组帮助类来设置页面上元素的位置。Bootstrap 提供的一些类如下：

Bootstrap provides a set of helper classes to set the position of an element on a page. Some of the classes provided by Bootstrap are as follows:.

.fixed-top
.fixed-bottom
.sticky-top
.sticky-bottom

让我们看每个类集的示例。

Let us see examples for each set of classes.

Fixed top

.fixed-top 类将元素的位置设置在视口的顶部，从边缘到边缘。

The class .fixed-top sets the position of an element at the top of the viewport, from edge to edge.

这对于创建导航栏或页眉很有用，这些导航栏或页眉即使用户向下滚动也会一直显示在屏幕顶部。

This is useful for creating navigation bars or headers that remain visible at the top of the screen even as the user scrolls down.

Example

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Position - Fixed top</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 style="height:1500px">
    <nav class="navbar navbar-expand-lg text-bg-success navbar-dark fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Use of .fixed-top class</a>
      </div>
    </nav>
    <div class="container-fluid" style="margin-top:80px">
      <h4>Position fixed at top</h4>
      <p>The class .fixed-top of Bootstrap sets the position of the element at top of the screen.</p>
      <h1>Scroll down the page to see the position</h1>
    </div>
</body>
</html>

Fixed bottom

.fixed-bottom 类将元素的位置设置在视口的底部，从边缘到边缘。

The class .fixed-bottom sets the position of an element at the bottom of the viewport, from edge to edge.

Example

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Position - Fixed bottom</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 style="height:1500px">
    <nav class="navbar navbar-expand-lg text-bg-primary navbar-dark fixed-bottom">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Use of .fixed-bottom class</a>
      </div>
    </nav>
    <div class="container-fluid" style="margin-top:80px">
      <h4>Position fixed at bottom</h4>
      <p>The class .fixed-bottom of Bootstrap sets the position of the element at the bottom of the page.</p>
      <h1>Scroll down the page to see the position</h1>
    </div>
  </body>
</html>

Sticky top

类 .sticky-top 用于创建粘性元素（从边缘到边缘），该元素会在屏幕顶部保持不动，但仅在你滚动经过它时。

The class .sticky-top is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.

Example

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Position - Sticky top</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 style="height:1500px">
    <div class="container-fluid mt-3">
      <h3>Sticky Navbar</h3>
      <p>The class <b>.sticky-top</b> is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p>
      <p>Scroll down the page to see the effect.</p>
    </div>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Sticky top</a>
      </div>
    </nav>
    <div class="container-fluid">
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
    </div>
  </body>
</html>

Responsive sticky top

响应式粘性顶部类用于网页设计中，以创建在用户向下滚动页面时仍粘在屏幕顶部的导航菜单或页眉。这可确保即使用户向下滚动页面，导航菜单也始终可见且易于访问。

Responsive sticky top classes are used in web design to create a navigation menu or header that sticks to the top of the screen as the user scrolls down the page. This ensures that the navigation menu is always visible and easily accessible, even as the user moves further down the page.

Bootstrap 提供的部分响应式粘性顶部类如下：

Some of the responsive sticky top classes provided by Bootstrap are as follows:

.sticky-sm-top sticks the position of element(s) to top on small sized viewports
.sticky-md-top sticks the position of element(s) to top on medium sized viewports
.sticky-lg-top sticks the position of element(s) to top on large sized viewports
.sticky-xl-top sticks the position of element(s) to top on extra large sized viewports
.sticky-xxl-top sticks the position of element(s) to top on extra extra large sized viewports

我们看一个示例：

Let us see an example:

Note ：调整浏览器大小以查看更改。

Note: Resize your browser to see the change.

Example

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Position - Responsive Sticky top</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 style="height:1500px">
    <div class="container-fluid mt-3">
      <h3>Sticky Navbar</h3>
      <p>The class <b>.sticky-lg-top</b> is a responsive class, used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p>
      <p>Scroll down the page to see the effect.</p>
    </div>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-lg-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Responsive Sticky top</a>
      </div>
    </nav>
    <div class="container-fluid">
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
    </div>
  </body>
</html>

Sticky bottom

类 .sticky-bottom 用于创建粘性元素（从边缘到边缘），该元素会在屏幕底部保持不动，但仅在你滚动经过它时。

The class .sticky-bottom is used to create a sticky element that remains at the bottom of the screen, from edge to edge, but only after you scroll past it.

Example

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Position - sticky bottom</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 style=height:1000px class="d-flex flex-column">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Sticky Bottom Example</a>
        </div>
    </nav>
    <!-- Content -->
    <div class="container-fluid flex-grow-1">
        <h4>sticky bottom</h4>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
    </div>
    <!-- Sticky Footer -->
    <footer class="footer text-bg-info py-3 sticky-bottom">
        <div class="container">
            <span class="display-6 text-dark">Sticky bottom</span>
        </div>
    </footer>
  </body>
</html>

Responsive sticky bottom

Bootstrap 提供的部分响应式粘性底部类如下：

Some of the responsive sticky bottom classes provided by Bootstrap are as follows:

.sticky-sm-bottom sticks the position of element(s) to bottom on small sized viewports
.sticky-md-bottom sticks the position of element(s) to bottom on medium sized viewports
.sticky-lg-bottom sticks the position of element(s) to bottom on large sized viewports
.sticky-xl-bottom sticks the position of element(s) to bottom on extra large sized viewports
.sticky-xxl-bottom sticks the position of element(s) to bottom on extra extra large sized viewports

让我们看看响应式粘性底部类的示例：

Let us seen an example for a responsive sticky bottom class:

Note ：调整浏览器大小以查看更改。

Note: Resize your browser to see the change.

Example

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Position - Responsive sticky bottom</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 style=height:1000px class="d-flex flex-column">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
          <a class="navbar-brand" href="#">Responsive Sticky Bottom Example</a>
        </div>
    </nav>
    <!-- Content -->
    <div class="container-fluid flex-grow-1">
        <h4>Responsive sticky bottom</h4>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
    </div>
    <!-- Sticky Footer -->
    <footer class="footer text-bg-warning py-3 sticky-lg-bottom">
        <div class="container">
          <span class="display-6 text-dark">Sticky bottom</span>
        </div>
    </footer>
  </body>
</html>