बूटस्ट्रैप में पाद [अनुलिपि]

Question

मैं बूटस्ट्रैप में वेब उत्तरदायी लचीला पाद बनाने की कोशिश कर रहा हूं, जो पृष्ठ के निचले भाग में होगा (यदि सामग्री पृष्ठ के निचले भाग पर है और यदि सामग्री में वृद्धि होती है तो तदनुसार बदल सकते हैं)। यह मेरा कोड है जिसका मैं उपयोग कर रहा हूं। मैं क्या मिस कर रहा हूं या गलत कर रहा हूं शुरुआत बूटस्ट्रैप और संस्करण 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>

यह मेरी सीएसएस है

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

जब मैं इसे एक विशेष आकार में देखने की कोशिश करता हूं तो यह स्क्रैंचशॉट होता है। स्क्रीन को फिट करने के लिए फोटॉटर पर्याप्त नहीं मिलता है। लेकिन जब एक और स्क्रीन में इसका ठीक

मेरा पाद इस div के अंदर है जिसमें पूर्ण स्क्रीन चौड़ाई नहीं है जब मैं पृष्ठ का निरीक्षण करता हूं। मैं 100% और 100vh के लिए भी मिनट की चौड़ाई जोड़ने की कोशिश की

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

}

Answer 1

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