ส่วนท้ายใน bootstrap [ซ้ำ]

Question

ฉันกำลังพยายามสร้างส่วนท้ายที่ยืดหยุ่นสำหรับการตอบสนองของเว็บใน bootstrap ซึ่งจะอยู่ที่ด้านล่างของหน้า (หากเนื้อหาน้อยกว่าที่ด้านล่างของหน้าและหากเนื้อหาเพิ่มขึ้นก็เปลี่ยนตามนั้น) นี่คือรหัสของฉันที่ฉันใช้ ฉันพลาดอะไรไปหรือทำอะไรผิด ผู้เริ่มต้นใช้งาน bootstrap และใช้เวอร์ชัน 4.5.0 ขอบคุณล่วงหน้า

   <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>

นี่คือ css ของฉัน

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

นี่คือภาพ scrrenshot เมื่อฉันพยายามดูในขนาดที่เฉพาะเจาะจง fotter ไม่ยาวพอที่จะพอดีกับหน้าจอ แต่เมื่ออยู่ในหน้าจออื่นก็ใช้ได้

ส่วนท้ายของฉันอยู่ใน div นี้ซึ่งไม่มีความกว้างเต็มหน้าจอเมื่อฉันตรวจสอบหน้า ฉันลองเพิ่ม min-width เป็น 100% และ 100vh ด้วย

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

}

Answer 1

คุณสามารถใช้บูตระดับ inbuilt d-flex flex-column min-vh-100สำหรับคอนเทนเนอร์หลักของคุณและmt-autoวิธีการที่คุณmargin-top auto footerดังนั้นส่วนท้ายของคุณจะอยู่ที่ด้านล่างของหน้าตามเนื้อหาเสมอ ด้านล่างนี้คือตัวอย่างข้อมูลเดียวกัน

<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>