问题 Bootstrap 3.0 - 将元素推到底部


我选择Twitter Bootstrap进行快速app显示层建设,最近我遇到了问题。

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


999
2017-09-28 22:48


起源



答案:


如果你知道你想要居中的元素的宽度,你可以使用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;
}

7
2017-09-28 23:19





使用 position: absolute 将它放到页面底部并使用 .text-center class(来自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
2017-08-27 20:38





好吧,主要问题在于我对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位置:绝对属性,然后简单地改变底部属性既固定又以百分比给出。


0
2017-09-29 17:12