html - Bootstrap 3.0 - 将元素推到底部

Question

我选择了 Twitter Bootstrap 用于快速应用显示层的构建，最近我遇到了问题。

我试图将元素推到页面容器的底部，但保持居中。添加课程 .push-to-bottom { position: absolute; bottom: 50px }没有帮助。

Answer 1

如果您知道要居中的元素的尺寸，则可以使用 margin-left 作为宽度 / 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%;
}

Clicky here for the fiddle。

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 position: absolute 属性，然后简单地更改底部属性，无论是固定的还是以百分比给出。