Chân trang trong bootstrap [trùng lặp]

Question

Tôi đang cố gắng tạo chân trang linh hoạt đáp ứng web trong bootstrap, chân trang này sẽ nằm ở cuối trang (nếu nội dung ít hơn ở cuối trang và nếu nội dung tăng lên thì hãy thay đổi tương ứng). Đây là mã của tôi mà tôi đang sử dụng. Tôi đang thiếu hoặc làm sai điều gì. Người mới bắt đầu khởi động và sử dụng phiên bản 4.5.0. Cảm ơn bạn trước

   <footer class="footer">
       <div class="container-fluid">
          <ul class="footertext">
                <li class="list">
                    About Us
                </li>
                <li class="list">
                    Contact Us
                </li>
            </ul>
             


         </div>
   </footer>

Đây là css của tôi

 .footer {
        position: absolute;
        bottom: 0;
        width: 100%;    
        background-color: black;
    }

đây là ảnh chụp khi tôi cố gắng xem nó ở một kích thước cụ thể. Tấm chắn không đủ dài để vừa với màn hình. Nhưng khi nó ở một màn hình khác, nó vẫn ổn

chân trang của tôi nằm bên trong div này không có chiều rộng toàn màn hình khi tôi kiểm tra trang. tôi đã thử thêm chiều rộng tối thiểu thành 100% và cả 100vh nữa

 .page-container {
position: relative;
min-height: 100vh;
/*min-width: 100%;*/

}

Answer 1

Bạn có thể sử dụng lớp có sẵn bootstrap d-flex flex-column min-vh-100cho vùng chứa chính và mt-autophương tiện margin-top autocủa bạn footer. Vì vậy chân trang của bạn sẽ luôn ở cuối trang tương ứng với nội dung. Dưới đây là đoạn mã cho cùng một

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100 text-center">
  <section>
    <h1>My content</h1>
  </section>
  <footer class="mt-auto text-light bg-dark pt-2 pb-2">footer</footer>
</div>