बूटस्ट्रैप में फिक्स्ड फूटर

Question

मैं बूटस्ट्रैप की कोशिश कर रहा हूं और मैं सोच रहा था कि सामग्री को स्क्रॉल करने पर मैं पृष्ठ से गायब हुए बिना पाद लेख को कैसे ठीक कर सकता हूं?

Answer 1

एक पाद लेख प्राप्त करने के लिए जो आपके व्यूपोर्ट के निचले हिस्से से चिपक जाता है, उसे इस तरह एक निश्चित स्थिति दें:

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

बूटस्ट्रैप में इस सीएसएस को कक्षा के साथ नवबार> प्लेसमेंट अनुभाग में शामिल किया गया है fixed-bottom। इस वर्ग को अपने पाद तत्व में जोड़ें:

<footer class="fixed-bottom">

बूटस्ट्रैप डॉक्स: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Comments

यह @ और डैनियल-टेरो की टिप्पणी ने मेरे लिए किया।

— jmng

यदि किसी पृष्ठ में स्क्रॉलिंग है, तो वह ठीक से काम नहीं कर रहा है।

— अर्नब

fixed-bottomवह नहीं किया जो मैं उम्मीद कर रहा था, मैंने इसके बजाय static-bottomपृष्ठ सामग्री ऊंचाई का सम्मान करने के लिए किया था ।

— गज

Answer 2

इसे जोड़ो:

<div class="footer navbar-fixed-bottom">

https://stackoverflow.com/a/21604189

EDIT: क्लास navbar-fixed-bottomको fixed-bottomबूटस्ट्रैप v4-alp.6 के रूप में बदल दिया गया है ।

http://v4-alpha.getbootstrap.com/components/navbar/#placement

Answer 3

इसे जोड़ो:

<div class="footer fixed-bottom">

Answer 4

z-index:-9999;इस विधि में जोड़ें , या यह आपके शीर्ष पट्टी को कवर करेगा यदि आपके पास है 1।

Answer 5

आप निम्न आईडी स्टाइल के साथ एक div में पृष्ठ सामग्री लपेटकर ऐसा कर सकते हैं:

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

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

मेरे लिए काम किया।

Answer 6

आप उस उदाहरण को जांचना चाहते हैं: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Comments

यह चिपचिपा पाद लेख के लिए है, निश्चित पाद लेख नहीं: /

— az_

@ARonz क्या अंतर है?

— Arsen Ibragimov

@ArsenIbragimov स्टिकी पाद पृष्ठ के अंत तक नीचे धकेल दिया जाता है यदि सामग्री दृश्य से अधिक लंबी हो। निश्चित पाद हमेशा दृश्य के तल पर दिखाई देता है।

— az_