twitter-bootstrap 如何在 Bootstrap 列中将元素与底部对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45410467/
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 element to bottom in a Bootstrap column?
提问by Radek Homola
I need to align a box to the left bottomof the bootstrap column. Thank you for help.
我需要将一个框与引导列的左下角对齐。谢谢你的帮助。
The problem is that the column has no defined height.
问题是该列没有定义的高度。
采纳答案by Dhaarani
.bottomdiv {
border: 1px solid red;
height: 50px;
width: 50px;
position:absolute;
left:0;
bottom:0;
}
.col-md-6.col-sm-6.col-xs-6 {
display: table-cell;
height: auto;
border: 1px solid black;
float: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="parent">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="bottomdiv">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div></div>回答by Gerard
You can make the column a flexbox and align the element to the end.
您可以将列设为 flexbox 并将元素对齐到末尾。
.row {
background: red;
}
.col-6-md {
background: lightblue;
height: 200px;
display: flex;
}
.bottom {
background: green;
align-self: flex-end;
width: 100px;
height: 50px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-6-md">
<div class="bottom">Bottom</div>
</div>
</div>回答by user8392586
You can also try using the absolute CSS functionality
您也可以尝试使用绝对 CSS 功能
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
then check the position, alter it to suite you
然后检查位置，更改它以适合您
回答by mariubog
If you don't want to play with css you can just set:
如果你不想玩 css 你可以设置：
class="mb-0"
class="mb-0"
It will set margin bottom to zero and should drop your content to the bottom of whatever cell it's in You can align it in other directions similar way: mb, mt, mr, ml
它将底部边距设置为零，并且应该将您的内容放到它所在的任何单元格的底部您可以以类似的方式将其对齐到其他方向：mb、mt、mr、ml
