ट्विटर बूटस्ट्रैप 3 स्टिकी पाद

204

मैं काफी समय से ट्विटर बूटस्ट्रैप फ्रेमवर्क का उपयोग कर रहा हूं और उन्होंने हाल ही में संस्करण 3 में अपडेट किया है!

मुझे नीचे से चिपके रहने के लिए चिपचिपा पाद प्राप्त करने में परेशानी हो रही है, मैंने ट्विटर बूटस्ट्रैप वेबसाइट द्वारा आपूर्ति किए गए स्टार्टर टेम्पलेट का उपयोग किया है, लेकिन फिर भी कोई भाग्य नहीं, कोई विचार?

html  css  twitter-bootstrap  twitter-bootstrap-3 
— ब्रैड फ्लेचर
स्रोत
31
आधिकारिक उदाहरण: getbootstrap.com/examples/sticky-footer-navbar
— ptim
3
@memeLab बॉडी मार्जिन-तल: -60 पीएक्स के बारे में आधिकारिक उदाहरण में कुछ भी क्यों नहीं है? या मुझे इसकी कमी महसूस हुई ...?
— गांडर्स
चिपचिपा पाद लेख के लिए चर ऊंचाई की अनुमति सीएसएस केवल समाधान जोड़ा गया । इसे नए लिंक के रूप में यहाँ जोड़ा गया है, यह पृष्ठ के निचले भाग में है।
— ताओ

जवाबों:

193

बस अपने पाद लेख के लिए वर्ग नव-स्थिर-तल जोड़ें।

<div class="footer navbar-fixed-bottom">
— जॉन
स्रोत
32
यह चिपचिपा पाद के समान नहीं है
— यूरा ओमेलचुक
3
यदि आपके पास शीर्ष लेख और पाद लेख है, तो आप मोबाइल डिवाइस पर बहुत अधिक स्थान ढीला कर देते हैं।
— स्ट्रेटनॉव
4
@strattonn कि मीडिया के सवाल क्या हैं
— याकूब रेकुआ
20
यह पूरी तरह से काम करता है अगर पेज को स्क्रॉल की आवश्यकता नहीं है। लेकिन पाद पृष्ठ पर अधिक सामग्री के साथ ओवरलैप करता है। इस पर कोई वर्कअराउंड? धन्यवाद!
— Xplora
1
ओवरलैप समस्या के बारे में निश्चित नहीं है, लेकिन मार्जिन / पैडिंग को जोड़ने से समस्या हल नहीं होती है?
— जॉन
152

आधिकारिक Boostrap3 चिपचिपा पाद उदाहरण का उल्लेख करते हुए, जोड़ने की आवश्यकता नहीं है <div id="push"></div>, और सीएसएस सरल है।

आधिकारिक उदाहरण में इस्तेमाल सीएसएस है:

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

और आवश्यक HTML:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

आप इस सीएसएस के लिंक को स्टिकी-फुटर उदाहरण के सोर्स कोड में पा सकते हैं।

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

पूर्ण URL: http://getbootstrap.com/examples/sticky-footer/sticky-footer.ess

— tkymtk
स्रोत
21
आधिकारिक स्टिकी-पाद उदाहरण में HTML और CSS अब यहां बताए गए तरीकों से काफी अलग है जैसे कि अब कोई 'रैप' डिव का उपयोग नहीं किया जाता है।
— इयानब
52

यहाँ एक विधि है जो एक चिपचिपा पाद लेख जोड़ देगा जिसमें किसी भी अतिरिक्त सीएसएस या जावास्क्रिप्ट की आवश्यकता नहीं है जो कि बूटस्ट्रैप में पहले से ही है और आपके वर्तमान पाद लेख के साथ हस्तक्षेप नहीं करेगा।

यहाँ उदाहरण: आसान स्टिकी पाद

बस इसे सीधे अपने कोड में कॉपी और पेस्ट करें। कोई उपद्रव नहीं मुस।

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— anataliocs
स्रोत
4
बहुत अच्छा और जल्दी। उत्तरदायी भी हो सकता है। लेकिन पृष्ठ सामग्री के निचले भाग में कुछ अतिरिक्त स्थान जोड़ने की आवश्यकता है ताकि यह पाद लेख द्वारा छिपा न हो। अंतरिक्ष में पाद ऊंचाई के बराबर ऊँचाई होनी चाहिए। क्या आप दिखा सकते हैं कि कैसे सबसे अच्छा है? BTW "किसी भी सीएसएस की आवश्यकता नहीं है" तकनीकी रूप से गलत है। यह "बूटस्ट्रैप कक्षाओं के अलावा किसी भी अतिरिक्त सीएसएस की आवश्यकता नहीं है" होना चाहिए ।
— ADTC
1
मुझे यह पसंद है कि यह बूटस्ट्रैप में मौजूद है। मुझे काम करने के लिए अन्य शीर्ष उत्तर नहीं मिल सके, लेकिन अपने पृष्ठ और बेम, चिपचिपा पाद लेख में इसे चिपकाना। धन्यवाद!
— हकोन .io
34

आपके द्वारा अभी जोड़े गए CSS के अलावा, याद रखें कि रैप div को बंद करने से पहले आपको पुश div को जोड़ना होगा

HTML के लिए मूल संरचना है 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

लाइव दृश्य
संपादित करें दृश्य

— डेविड टिरोआ
स्रोत
यदि पृष्ठ सामग्री उपलब्ध डिस्प्ले से बड़ी है, तो पाद को नीचे धकेल दिया जाएगा। मैं
— पादरी
हे @delavnog, क्या आपके लिए यह काम पसंद आएगा? codepen.io/panchroma/pen/wMXWpY । आपके लिए एकमात्र महत्वपूर्ण बिट्स एचटीएमएल 647 और सीएसएस
— डेविड टैरियाओ
@delavnog, पेज codepen.io/panchroma/pen/JGZKqy
— डेविड
धन्यवाद, यह बहुत अच्छा है! अब, यदि मैं नौसेना और पाद लेख के बीच मुख्य रूप से केंद्र में खड़ी हो सकती है, तो यह बहुत बढ़िया होगा! अपना कोडपैन संपादित किया: codepen.io/anon/pen/rxKMaW (मुझे शरीर में एक मार्जिन जोड़ना था, क्योंकि
— नौसेना
@delavnog, यहाँ एक शुरुआत है अगर मुख्य शरीर बहुत अधिक नहीं है। हालांकि अधिक सामग्री के लिए यह अधिक काम करेगा: codepen.io/panchroma/pen/vLrXMq
— डेविड
30

यहाँ स्टिकी फूटर सरलीकृत कोड आज के रूप में है क्योंकि वे हमेशा इसे अनुकूलित कर रहे हैं और यह अच्छा है:

एचटीएमएल

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

सीएसएस

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
— लेनियल मैकाफेर्री
स्रोत
1
सही समाधान। यही मैं ढूंढ रहा था।
— लेविमैट
1
दुर्भाग्य से इस पाद का आकार निश्चित है। कभी-कभी, जब पाद गतिशील होता है तो यह css में अपनी ऊँचाई से बड़ा या छोटा हो सकता है।
— 23W
27

मुझे इस विषय पर थोड़ी देर हो गई है लेकिन मैं इस पोस्ट पर आया हूं क्योंकि मुझे सिर्फ उस सवाल से काट दिया गया है और अंत में इसे प्राप्त करने का एक बहुत आसान तरीका मिला, बस सक्षम वर्ग के navbarसाथ उपयोग करें navbar-fixed-bottom। उदाहरण के लिए:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

— आईएमआईएल
स्रोत
मुझे आपके उत्तर की सरलता और प्रभावशीलता पसंद है, जो कि एक बुद्धिमान उत्तर है। एक ही मुद्दे के कई जवाब jquery, और जटिल सामान से भरे हुए हैं। धन्यवाद दोस्त।
— डिगताई
1
इसका आधा समाधान, आपको अभी भी अपने पेज के कंटेंट के ओवरलैप्स का ध्यान रखना होगा, यदि आप इसका आकार बदलते हैं।
— बाल्द्रनी
@ बाल्द्रनी इसका कोई पूर्ण समाधान नहीं है, अगर आप बूटस्ट्रैप पंक्ति और कर्नल को फ़ुटर html (जो कि आपको वैसे भी करना चाहिए) में उपयोग करने पर ओवरलैप ठीक काम करता है
— Tino Mclaren
यह एक चिपचिपा पाद नहीं है। यह फिक्स्ड बॉटम नेबर है जो केवल नेबर कंटेंट के लिए उपयुक्त है, और पेज कंटेंट को ओवरलैप करता है।
— ज़िम
10

यहाँ इस मुद्दे का मेरा अद्यतन समाधान है। 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

और इसे इस तरह उपयोग करें: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

या 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— ज़ी
स्रोत
4
यह एक अच्छा समाधान नहीं है क्योंकि आपका पाद तय है जिसका अर्थ है कि यह पृष्ठ सामग्री (यदि कोई है) को ओवरलैप करता है। some text<br>पाद लेख से पहले कुछ पंक्तियों को जोड़ने का प्रयास करें और खिड़की के नीचे आकार दें।
— jmarceli
@ user2041318: हाँ, यह भयानक है ... इसे इंगित करने के लिए धन्यवाद।
— सेबस्टियन
जमरेली की टिप्पणी के अनुसार इसे ठीक कर लिया गया है। पाद अब तय नहीं है।
— ज़ी।
3

चिपचिपा उदाहरण मेरे लिए काम नहीं करता है। मेरा समाधान:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— एंडी गिगा
स्रोत
सरल, अच्छा पुराने जमाने का सीएसएस। काम हो गया। मुझे यह देखकर आश्चर्य होता है कि उच्च श्रेणी के कुछ उत्तर कितने जटिल हैं। क्या बूटस्ट्रैप हमारे जीवन को आसान बनाने वाला नहीं है? 😂
— कल
2

धक्का divसही के बाद जाना चाहिए wrap, भीतर नहीं .. बस ऐसे ही 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— यूसुफ
स्रोत
2

ओपी द्वारा उत्तर दिया गया:

इसे अपनी CSS फ़ाइल में जोड़ें।

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
— CodeCaster
स्रोत
2

मैं एक लचीला चिपचिपा पाद चाहता था , यही वजह है कि मैं यहां आया था। शीर्ष उत्तर मुझे सही दिशा में मिले।

वर्तमान (2 अक्टूबर 16) बूटस्ट्रैप 3 सीएसएस स्टिकी पाद (निश्चित आकार) इस तरह दिखता है:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

जब तक पाद का एक निश्चित आकार होता है, तब तक शरीर का मार्जिन-नीचे पाद को बैठने के लिए एक पॉकेट की अनुमति देने के लिए एक धक्का बनाता है। इस मामले में, दोनों को 60px पर सेट किया जाता है। लेकिन अगर पाद तय नहीं किया गया है और 60px ऊंचाई से अधिक है, तो यह आपके पृष्ठ की सामग्री को कवर करेगा।

फ्लेक्सिबल बनाएं: सीएसएस बॉडी मार्जिन और फुटर हाइट को डिलीट करें। फिर पाद ऊंचाई प्राप्त करने के लिए जावास्क्रिप्ट जोड़ें और बॉडी मार्जिन सेट करें। यह सेटफूटर () फ़ंक्शन के साथ किया जाता है। जब पृष्ठ पहली बार लोड होता है और उस सेटफ़ूटर को चलाने के आकार बदलने पर अगला श्रोता जोड़ते हैं। ध्यान दें: यदि आपके पास पाद लेख में एक अकॉर्डियन या कुछ और है जो आकार परिवर्तन को ट्रिगर करता है, तो खिड़की के आकार के बिना, आपको फिर से सेटफूटर () फ़ंक्शन को कॉल करना होगा।

इसे प्रदर्शित करने के लिए स्निपेट और फिर फुलस्क्रीन चलाएं।

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
स्निपेट का विस्तार करें

— सख्त
स्रोत
2

यह flexbox द्वारा हल किया गया है, एक बार और हमेशा के लिए:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

सीएसएस

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
— कोंस्टेंटिन शुबर्ट
स्रोत
2

सरल जेएस

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

अपडेट # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— fdrv
स्रोत
1

इन सभी को सारांशित करने के लिए, बस एक बात अपने दिमाग में रखें कि पाद को छोड़कर सब कुछ होना चाहिए min-height: 100%या बहुत कम।

— kshirish
स्रोत
1

मैं कम से कम पैडिंग के साथ अपना सरलीकृत चिपचिपा पाद लेख लिखता हूं। यह उत्तर शायद ऑफ-टॉपिक है क्योंकि प्रश्न पैडिंग के बारे में बात नहीं करता है, इसलिए यदि आप रुचि रखते हैं तो अधिक जानकारी के लिए इस पोस्ट को देखें।

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— फ्रेड के
स्रोत
1

Jek-fdrv के उत्तर के आधार पर , मैंने .on('resize', function()यह सुनिश्चित करने के लिए एक जोड़ा कि यह हर डिवाइस और प्रत्येक रिज़ॉल्यूशन पर काम करता है:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— iamchriswick
स्रोत
1

बूटस्ट्रैप का वर्तमान संस्करण अब इस फ़ंक्शन के लिए काम नहीं करता है। यदि आप उनके चिपचिपे-पाद-नेवार्बर उदाहरण को डाउनलोड करते हैं और मुख्य निकाय क्षेत्र में बड़ी मात्रा में सामग्री रखते हैं, तो पाद व्यूपोर्ट के निचले भाग के नीचे धकेल दिया जाएगा। यह बिल्कुल भी चिपचिपा नहीं है।

— सीजे कैटलानो
स्रोत
1

यहाँ पूरी तरह उत्तरदायी चर-ऊंचाई चिपचिपा पाद के लिए एक सीएसएस आधारित समाधान है।
लाभ: पाद लेख चर ऊंचाई की अनुमति देता है, क्योंकि ऊँचाई को अब CSS में हार्ड-कोड करने की आवश्यकता नहीं है।

कोड स्निपेट दिखाएं

और यहाँ है अन-पहले से जुड़ा हुआ SCSS(के लिए gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— ताओ
स्रोत
1

बस फ्लेक्स का उपयोग करें! अपने HTML में शरीर और मुख्य का उपयोग करना सुनिश्चित करें और यह सबसे अच्छे समाधानों में से एक है (जब तक आपको IE9 समर्थन की आवश्यकता न हो)। इसके लिए एक निश्चित ऊँचाई या अपरिचित की आवश्यकता नहीं है।

कि Materialize के लिए भी सिफारिश की है!

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}
— kentor
स्रोत
0

Haml & Sass शब्दों में वह सब आवश्यक है:

के लिए हमल app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

के लिए सैस app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

http://getbootstrap.com/examples/sticky-footer-navbar/ पर आधारित

— equivalent8
स्रोत
0

यदि आप पाद लेख के लिए कक्षाओं में बूटस्ट्रैप बिल्ड का उपयोग करना चाहते हैं। आपको कुछ जावास्क्रिप्ट भी लिखनी चाहिए:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

यह निश्चित पाद लेख द्वारा अतिव्यापी सामग्री को रोक देगा, और यह सामग्री को समायोजित करेगा padding-bottom जब उपयोगकर्ता विंडो / स्क्रीन का आकार बदलता है तो ।

ऊपर की स्क्रिप्ट में मैंने मान लिया कि पाद को सीधे शरीर के अंदर टैग की तरह रखा गया है:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

यह निश्चित रूप से सबसे अच्छा समाधान नहीं है (क्योंकि जेएस से बचा जा सकता है), लेकिन यह अतिव्यापी के साथ किसी भी मुद्दे के बिना काम करता है, इसे लागू करना आसान है और उत्तरदायी ( heightसीएसएस में हार्डकोड नहीं है)।

— jmarceli
स्रोत
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
स्निपेट का विस्तार करें

— Gpak
स्रोत
नीचे यह चिपचिपा कैसे है?
— सेबस्टियन
0

यहाँ एक बहुत ही सरल और साफ चिपचिपा पाद है जिसे आप बूटस्ट्रैप में उपयोग कर सकते हैं। पूरी तरह से उत्तरदायी!

एचटीएमएल

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

सीएसएस

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

उदाहरण: कोडपेन डेमो

— Gothburz
स्रोत
निरपेक्ष स्थिति के कारण बूटस्ट्रैप मोडल खोलने पर यह समाधान पाद लेख बार को दाईं ओर स्थानांतरित कर देगा!
— thethakuri
0

उपयोग करना flexboxसबसे आसान तरीका है जो मैंने पाया है, सीएसएस-ट्रिक्स के लोगों से । यह सही चिपचिपा पाद है, यह तब काम करता है जब सामग्री पृष्ठ का <100% और पृष्ठ का 100% हो:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

और सीएसएस:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

ध्यान दें कि यह बूटस्ट्रैप-अज्ञेयवादी है, इसलिए यह बूटस्ट्रैप और इसके बिना काम करता है।

— bustawin
स्रोत
0

आप बस अपने पाद लेख पर एक वर्ग जोड़ने की कोशिश कर सकते हैं नावबार:

navbar-fixed-bottom

फिर एक CSS नाम custom.css और बॉडी पैडिंग इस तरह बनाएं ..

body { padding-bottom: 70px; }
— इकराम - उद - दौला
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.