twitter-bootstrap 在引导程序中将 div 与页面底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34470264/
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
Align div to bottom of the page in bootstrap
提问by Nominalista
I tried to use methods from stack questions, but nothing works for me, despite project is very simple.
我尝试使用堆栈问题中的方法，但没有任何方法对我有用，尽管项目非常简单。
<div class="fluid-container">
<div id="app-row" class="row">
<div id="app" class="col-xs-5">
<div class="top-navbar">
Top
</div>
<div class="bottom-navbar">
Bottom
</div>
</div>
<div id="map-container" class="col-xs-7">
<div id="map"></div>
</div>
</div>
</div>
style.css
样式文件
.fluid-container {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
width: 100%;
}
.row {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
width: 100%;
}
html, body, .fluid-container, #app-row, #map-container {
height: 100%
}
#app-row {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
#map-container {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
#map {
height: 100%;
width: 100%;
}
What I want to achieve:
我想要达到的目标：
Bottom is bottom of the page and Top is on the top of the page.
底部是页面的底部，顶部是页面的顶部。
回答by AngularBoy
Try using navbar-fixed-bottom:
尝试使用导航栏固定底部：
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
My footer
</div>
</div>
回答by Core972
回答by letthefireflieslive
You can do this using bootstrap 4 flexbox.
你可以使用 bootstrap 4 flexbox 来做到这一点。
<div class="d-flex flex-column justify-content-between">
<div></div>
<div>bottom content</div>
</div>
