Bootstrap 3.0 - 将元素推到底部

Question

我选择了Twitter Bootstrap用于快速应用程序显示层构建,最近我遇到了问题.

我正在尝试将元素推送到页面容器的底部,但保持其居中.添加类 .push-to-bottom { position: absolute; bottom: 50px }没有帮助.

Answer 1

如果您知道要居中的元素的尺寸,则可以使用margin-left为width/2的负值.就像这个jsFiddle示例:

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

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

Answer 2

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

单击此处获取小提琴。

Answer 3

嗯，主要问题是我对 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位置：绝对属性，然后简单地更改固定或以百分比给出的底部属性。