Bootstrap 3.0 - wypychaj element do dołu

Question

Wybrałem opcję Twitter Bootstrap do szybkiej rozbudowy warstwy aplikacji, ostatnio miałem problem.

Próbuję przesunąć element do końca kontenera strony, ale utrzymuję go w środku. Dodanie klasy .push-to-bottom { position: absolute; bottom: 50px } nie pomogło.

Answer 1

Cóż, głównym problemem było w moja słaba znajomość konformacji CSS i Bootstrap. Znalazłem to rozwiązanie do przyjęcia, może nie jest to najlepsze podejście, ale działa i jest w pełni odpowiedzialne.

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

Głównym celem było utrzymanie strefa pełni skoncentrowane w poziomie, tak #home div owinięty wewnątrz pojemnika, a następnie daje pozycję #home Div: właściwość absolutnego, a następnie po prostu zmieniają własności zarówno dolną stałą lub podane w procentach .

Answer 2

Jeśli znasz szerokość elementu, który chcesz środkowej, można użyć margin-left jest ujemnej wartości szerokości/2. Podobnie jak to jsFiddle example:

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

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

Answer 3

Zastosowanie position: absolute aby zmusić go do dołu strony i skorzystać z klasy (od Bootstrap) .text-center wraz z width: 100% dostać go w środku:

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