Html 如何将 div 与 div bootstrap 内的底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46877347/
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
How to align div to bottom inside div bootstrap
提问by Sander Bakker
html, body, .sidebar-container, .sidebar-row {
height: 100%;
}
.sidebar {
background-color: #2C3544;
}
@media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #2C3544;
}
}
img{
margin: auto;
display: block;
}
.sidebar-image{
margin-top: 15px;
}
.sidebar-items{
margin-top: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid sidebar-container">
<div class="row sidebar-row">
<div class="col-md-2 sidebar">
<div class="container-fluid">
<div class="col-md-12 sidebar-image">
<img src="assets/logo-white.png" width="75px" height="75px"/>
</div>
</div>
<div class="row sidebar-items">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item">Dashboard</li>
<li class="list-group-item">Projects</li>
<li class="list-group-item">Statistics</li>
</ul>
</div>
</div>
<div class="row align-bottom">
hafldjalfjsdlfsjdlfsjlfs
</div>
</div>
<div class="col-md-10 offset-md-2 content">
Main Content
</div>
</div>
</div>I wrote this HTML/CSS code trying to align a div to the bottom inside another div:
我写了这个 HTML/CSS 代码，试图将一个 div 与另一个 div 内的底部对齐：
I want to align this last div in the col-md-2to the bottom of the sidebar-containerwhich height is 100%. I tried adding the bootstrap class align-bottombut somehow this doesn't work. Could anyone help me out?
我想将最后一个 div 对齐col-md-2到sidebar-container高度为 100%的底部。我尝试添加引导程序类，align-bottom但不知何故这不起作用。有人可以帮我吗？
采纳答案by Fahad Subzwari
Suppose you have 2 divs. Div A(Outer) and Div B(Inner). To achieve your task just place Div B code in Div A code and in Div B css class add this
假设你有 2 个 div。Div A（外部）和 Div B（内部）。要完成您的任务，只需将 Div B 代码放在 Div A 代码中，并在 Div B css 类中添加此代码
position : absolute
bottom : 0
回答by kelly1025
You can also just use bootstrap flexbox to do this.
你也可以只使用 bootstrap flexbox 来做到这一点。
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>
align items to the left or rightmake sure that you include the entire d-flex align-items-end flex-columnon the parent element and choose start or end depending if you want it to be aligned left or right.
将项目左对齐或右对齐确保d-flex align-items-end flex-column在父元素上包含整个元素，并根据您希望它左对齐还是右对齐来选择开始或结束。
align item to the bottomThen, use mt-autoon the div that you want to stick to the bottom of the parent.
将项目与底部对齐然后，mt-auto在要粘贴到父级底部的 div 上使用。
