แก้ไขส่วนท้ายใน Bootstrap


87

ฉันกำลังลองใช้Bootstrapและฉันสงสัยว่าฉันจะแก้ไขส่วนท้ายที่ด้านล่างได้อย่างไรโดยไม่ให้มันหายไปจากหน้าหากเนื้อหาถูกเลื่อน?

คำตอบ:


215

ในการรับส่วนท้ายที่ติดกับด้านล่างของวิวพอร์ตของคุณให้กำหนดตำแหน่งคงที่ดังนี้:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

เงินทุนรวมถึง CSS นี้ในส่วน Navbar> fixed-bottomตำแหน่งกับการเรียน เพียงเพิ่มคลาสนี้ในองค์ประกอบส่วนท้ายของคุณ:

<footer class="fixed-bottom">

เอกสาร Bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom


ความคิดเห็นนี้และ @ Daniel-Tero ทำเพื่อฉัน
jmng

4
หากเพจมีการเลื่อนแสดงว่าทำงานไม่ถูกต้อง
Arnab

2
fixed-bottomไม่ได้ทำในสิ่งที่ฉันคาดหวังฉันทำแทนstatic-bottomเพื่อเคารพความสูงของเนื้อหาของหน้า
Gjaa




0

คุณสามารถทำได้โดยการรวมเนื้อหาของหน้าใน div โดยใช้สไตล์ id ต่อไปนี้:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

ทำงานให้ฉัน


-4

คุณอาจต้องการตรวจสอบตัวอย่างนั้น: http://getbootstrap.com/2.3.2/examples/sticky-footer.html


2
สำหรับส่วนท้ายเหนียวไม่ใช่ส่วนท้ายที่ตายตัว: /
az_

@aaronz ต่างกันอย่างไร?
Arsen Ibragimov

4
@ArsenIbragimov Sticky ส่วนท้ายจะถูกดันลงไปที่ส่วนท้ายของหน้าหากเนื้อหาสูงกว่ามุมมอง ส่วนท้ายคงปรากฏที่ด้านล่างของมุมมองเสมอ
az_
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.