Question

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

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

Answer 1

如果您知道要居中的元素的尺寸，则可以使用margin-left为width / 2的负值。像这样jsFiddle example：

.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位置：绝对属性，然后简单地更改底部属性，无论是固定还是以百分比给出。

Bootstrap 3.0 - 将元素推到底部

3 个答案: