Bootstrap 5位置固定底部

Bootstrap 5 Position 固定底部用于将元素的位置设置为视口的底部。我们可以使用一些CSS属性来显示固定底部位置的效果。

位置固定底层类：

fixed-bottom。该类用于将元素的位置设置为视口的底部。

语法:

<div class="fixed-bottom">
    Content
</div>

例子1：在这个例子中，我们将创建一个固定宽度和高度的div元素，并将其位置设置为固定的底部。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Position Fixed bottom</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>
    
    <style>
        .box {
            width: 250px;
            height: 100px;
            border: 1px solid #312d2d;
            margin: 0 auto;
        }
    </style>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Bootstrap 5 Position Fixed bottom</h3>
        <div class="box fixed-bottom"></div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5位置固定底部

例子2：在这个例子中，我们将创建一个固定宽度和高度的图像元素，并将其位置设置为固定的底部。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Position Fixed bottom</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
      </script>
    
    <style>
        img {
            margin: auto;
        }
    </style>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Bootstrap 5 Position Fixed bottom</h3>
          
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            class="fixed-bottom" alt="GFG Logo">
    </div>
</body>
  
</html>

输出:

Bootstrap 5位置固定底部