Html Bootstrap 3.0 - 将元素推到底
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19072516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0 - push element to bottom
提问by Alan Kis
I chose Twitter Bootstrap for quick app display layer bulding, recently I have faced problem.
我选择了 Twitter Bootstrap 来快速构建应用显示层，最近我遇到了问题。
I'm trying to push element to bottom of page container, but keeping it centered. Adding class
.push-to-bottom { position: absolute; bottom: 50px }didn't help.
我正在尝试将元素推送到页面容器的底部，但将其保持居中。添加课程
.push-to-bottom { position: absolute; bottom: 50px }没有帮助。
采纳答案by Alan Kis
Well, the main problem was in my poor knowledge of CSS and Bootstrap convetions. I found this solution acceptable, maybe it isn't the best approach, but it works, and it is fully reponsible.
好吧，主要问题是我对 CSS 和 Bootstrap 对流的了解不足。我发现这个解决方案是可以接受的，也许它不是最好的方法，但它有效，并且完全负责。
<div class="container">
<div id="home">
<div class="row">
<div class="col-lg-12">
<h1>Some heading</h1>
</div>
</div>
</div>
</div>
Main goal was to keep div fully centered horizontally, so #home div is wrapped inside container, then give the #home div position: absolute property, and then is simply change bottom property both fixed or given in percentage.
主要目标是保持 div 完全水平居中，所以 #home div 被包裹在容器内，然后给 #home div position: absolute 属性，然后简单地更改底部属性，固定或以百分比给出。
回答by thiagobraga
If you know the dimensions of the element you want to center, you can use a margin-left being the negative value of width / 2. Like this jsFiddle example:
如果您知道要居中的元素的尺寸，则可以使用 margin-left 作为宽度 / 2 的负值。就像这个jsFiddle 示例：
.push-to-bottom {
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -50px;
}
#element {
background-color: #000;
width: 100px;
height: 100px;
}
回答by ninjaPixel
Use position: absoluteto get it to the bottom of the page and use the .text-centerclass (from Bootstrap) along with width: 100%to get it in the middle:
用于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%;
}
