Bootstrap 3.0 - öğeyi aşağı itin

Question

Hızlı uygulama görüntüleme katmanı bulding için Twitter Bootstrap'ı seçtim, son zamanlarda sorunla karşılaştım.

Öğeyi sayfa kabının altına itmeye çalışıyorum ancak ortalamayı koruyorum. .push-to-bottom { position: absolute; bottom: 50px } sınıfının eklenmesi işe yaramadı.

Answer 1

Eh, asıl sorun oldu CSS ve Bootstrap convetions benim zayıf bilgisi. Bu çözümü kabul edilebilir buldum, belki de en iyi yaklaşım değil, ama işe yarıyor ve tamamen sorumlu. basitçe sabit veya yüzde verilen hem alt özelliğini değiştirmek daha sonra mutlak mülkiyet ve:

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

Ana hedef div tamamen yatay olarak ortalanmış tutmak için, bu yüzden #home div kabın içine sarılır, sonra #home div pozisyon vermek .

Answer 2

Eğer eleman istediğin merkezi genişliğini biliyorsanız, kullanabileceğiniz bir margin-left jsFiddle example Bunun gibi genişlik/2. negatif değerini olma:

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

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

Answer 3

Kullanım position: absolute sayfanın alt kısmına almak ve ortada bunu elde etmek için width: 100% ile birlikte (Bootstrap itibaren) .text-center sınıfını kullanmak için:

<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.