2 सवाल: बूटस्ट्रैप 4 कंटेनर चौड़ाई गलत

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं अपने पाद लेख को अंदर ले जाने के लिए बूटस्ट्रैप 4 "कंटेनर" का उपयोग कर रहा हूं।

कंटेनर की चौड़ाई अपेक्षा के अनुसार स्क्रीन के निचले हिस्से को कवर नहीं करती है। अगर मैं कंटेनर को कंटेनर-फ्लुइड में बदलता हूं तो यह अपेक्षित रूप से काम नहीं करता है।

JSFiddle यहां: https://jsfield.net/1Zero3Tech/6p1rg3ub/3//>

 <div class="container">
        <footer class="footer">
            <div class="row">
                <div class="col-6 text-left">
                    Some Text On The Left
                </div>
                <div class=" col-6 text-right">
                    Some Text On The Right
                </div>
            </div>
        </footer>
    </div>

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    background-color: yellow;
}
    
- 1
  1. आपका position:absolute नियम बूटस्ट्रैप को मार रहा है
    2019-05-08 14: 58: 36Z
  2. 0600350991100100101035062 में दोनों ओर 15px पैडिंग है, आपको इसे हटाने की जरूरत है /ओवरराइड करेंगे, शायद नकारात्मक मार्जिन के साथ। - jsfiddle.net/zrhmga0v
    2019-05-08 15: 00: 28Z
    2 उत्तर                              2                         

    .container-fluid या container वर्ग का उपयोग सामग्री क्षेत्र को कवर करने के लिए किया जाना चाहिए, न कि चौड़ाई।

    इसलिए, मैंने HTML संरचना को फिर से बनाया है, इसके साथ container-fluid चौड़ाई के लिए जिम्मेदार होगा, न कि footer या container पर। वे आपके सामग्री क्षेत्र के लिए ज़िम्मेदार होंगे।

      

    सुविधाजनक के लिए, मैंने एक container-fluid श्रेणी जोड़ी है, जो पाद लेख छड़ी बनाती है   पृष्ठ के नीचे लेकिन अगर आप चिपचिपा पाद नहीं चाहते हैं तो आप कर सकते हैं   हमेशा कक्षा निकालें।

    fixed
        
    1
    2019-05-08 15: 26: 08Z

    j08691 और Paulie_D दोनों सही हैं।

    .footer {
      background-color: yellow;
      font-weight: 600;
      height: 60px;
      line-height: 60px;
    }
    
    .fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <footer class="footer fixed">
      <div class="container-fluid">
        <div class="row">
          <div class="col-6 text-left">
            Some Text On The Left
          </div>
          <div class=" col-6 text-right">
            Some Text On The Right
          </div>
        </div>
      </div>
    </footer>
    को बाहर निकालें, और माता-पिता पर कुछ नकारात्मक मार्जिन डाल दें 0600350991100101035062। आप नीचे दिए गए अभिभावक को position: absolute पर चिपका कर प्रयोग करना चाह सकते हैं।     
    0
    2019-05-08 15: 07: 38Z
    .container
स्रोत रखा गया यहाँ