बूटस्ट्रैप 3.0 - नीचे धक्का तत्व

Question

मैंने त्वरित ऐप डिस्प्ले परत बल्बिंग के लिए ट्विटर बूटस्ट्रैप चुना है, हाल ही में मुझे समस्या का सामना करना पड़ा है।

मैं पेज कंटेनर के नीचे तत्व को धक्का देने की कोशिश कर रहा हूं, लेकिन इसे केंद्रित रखता हूं। कक्षा .push-to-bottom { position: absolute; bottom: 50px } जोड़ने से मदद नहीं मिली।

Answer 1

ठीक है, मुख्य समस्या में था सीएसएस और बूटस्ट्रैप convetions के मेरे खराब ज्ञान। मुझे यह समाधान स्वीकार्य पाया गया है, शायद यह सबसे अच्छा तरीका नहीं है, लेकिन यह काम करता है, और यह पूरी तरह से असंवेदनशील है।

<div class="container"> 
    <div id="home"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1>Some heading</h1> 
     </div> 
    </div> 
    </div> 
</div> 

मुख्य लक्ष्य div पूरी तरह से क्षैतिज रूप से केंद्रित रखने के लिए था, इसलिए #home div कंटेनर के अंदर लपेटा जाता है, तो #home div स्थिति दे: पूर्ण संपत्ति, और फिर बस नीचे संपत्ति बदल जाता है, दोनों निश्चित या प्रतिशत में दी गई ।

Answer 2

आप तत्व आप चाहते केन्द्र की चौड़ाई पता हैं, तो आप उपयोग कर सकते हैं एक मार्जिन-बाएँ की तरह इस jsFiddle example चौड़ाई/2. के नकारात्मक मूल्य जा रहा है:

.push-to-bottom { 
    position: absolute; 
    bottom: 50px; 
    left: 50%; 
    margin-left: -50px; 
} 

#element { 
    background-color: #000; 
    width: 100px; 
    height: 100px; 
} 

Answer 3

उपयोग position: absolute पेज के सबसे अंत में मिलता है और width: 100% के साथ (बूटस्ट्रैप से) .text-center क्लास का उपयोग बीच में इसे पाने के लिए करने के लिए:

<div class="container"> 
    <div class="row force-to-bottom text-center"> 
    <div class="col-xs-12"> 
      <h1> 
      <input class="btn btn-primary" type="submit" value="Save"> 
     </h1> 

    </div> 
</div> 

.force-to-bottom { 
    position:absolute; 
    bottom: 5%; 
    width: 100%; 
} 

Clicky here for the fiddle.