Làm cách nào để sửa chân trang ở cuối trang bằng Bootstrap?

Để tạo chân trang ở cuối trang web Chúng tôi có thể cố định vị trí của nó ở cuối trang web để nếu bạn cuộn xuống trang web đó, bạn vẫn có thể xem chân trang từ bất kỳ vị trí nào trên trang. Để cố định chân trang ở cuối trang web, bạn có thể sử dụng vị trí. đã sửa. cú pháp

Nội dung chính Show

Làm cách nào để đặt chân trang cố định trong HTML Bootstrap?
Làm cách nào để sử dụng Bootstrap chân trang dính?

#footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 60px;   /* Height of the footer */
   background: #6cf;
}

Thí dụ.

html

<html>

<head>

<style>

<1<2

<3_______2_______4

<3_______2_______6

<3_______2_______8

<3_______3_______0

<3_______3_______2

<3_______3_______4

<3_______3_______6

<1____3_______8

>0_______10_______>

<head>

<1<4_______9>

<3_______2_______2_______3>

<5_______2__________<7 <8<9head0_______4_______

head2<___head4_______6_______5head4>

head2<___<7 <8<9<29<30

head2<32

<5_______4_______0_______2_______7>

<3_______4_______0_______2_______3>

<1>0_______4_______9>

<1<html>

đầu ra.

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

Để phần tử này ở vị trí cuối trang, bạn phải thêm fixed-bottom vào lớp _______ 155 _______

<footer class="bg-info text-center text-lg-start fixed-bottom">
  <!-- Grid container -->
  <div class="container p-4">
    <!--Grid row-->
    <div class="row">
      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled mb-0">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase mb-0">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled mb-0">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase mb-0">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
  <!-- Grid container -->

  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
    © 2020 Copyright:
    <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>

Thông tin thêm và mô tả chi tiết có thể được tìm thấy tại trang 📄Documentation

Làm cách nào để đặt chân trang cố định trong HTML Bootstrap?

Để cố định chân trang, bạn cần thêm. lớp dưới cùng cố định trong thẻ . Tham khảo dòng đánh dấu HTML số 37.

Làm cách nào để sử dụng Bootstrap chân trang dính?

Sticky Footer trong Bootstrap được sử dụng khi chân trang muốn cố định ở vị trí cuối trang thậm chí cuộn xuống dưới cùng hoặc cuộn lên trên cùng. It means the footer is always fixed on the bottom.