it-swarm.com.ru

Bootstrap 3.0 - толкать элемент вниз

Я выбрал Twitter Bootstrap для быстрого создания слоя отображения приложений, недавно я столкнулся с проблемой. 

Я пытаюсь поместить элемент в конец контейнера страницы, но держу его по центру. Добавление класса .Push-to-bottom { position: absolute; bottom: 50px } не помогло.

11
Alan Kis

Ну, главная проблема была в моих плохих знаниях CSS и конвенций Bootstrap…. Я нашел это решение приемлемым, возможно, это не лучший подход, но он работает, и он полностью отвечает.

<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 position: absolute свойство, а затем просто изменяет свойство bottom, как фиксированное, так и заданное в процентах.

0
Alan Kis

Если вы знаете размеры элемента, который вы хотите центрировать, вы можете использовать поле слева, являющееся отрицательным значением ширины/2. Как это jsFiddle пример :

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

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

Используйте position: absolute, чтобы получить его внизу страницы, и используйте класс .text-center (из Bootstrap) вместе с width: 100%, чтобы получить его посередине:

<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%;
}

Нажмите здесь для скрипки.

4
ninjaPixel