如何将列内容放置在底部？ [英] How can I place column content on the bottom?
本文介绍了如何将列内容放置在底部？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一排三列，其中一列有两个按钮。此按钮行应放置在列的底部。问题是我如何得到这个？提前致谢。
解决方案
问题是float的元素没有固定的高度，所以你不能将它放在底部。
这就是为什么您必须转换成表容器，并将列转换为表格单元格以应用vertical-align：bottom。请参阅以下代码：
I have a row with three columns one of which has two buttons. This button row should be placed on the bottom of the column. The question is how do I get this? Thanks in advance.
<div class="container">
<div class="row">
<div class="col-xs-4">
I needed to insert some text to place it on multiple rows
</div>
<div class="col-xs-4">
<a class="btn btn-default">
Button
</a>
<a class="btn btn-default">
Button
</a>
</div>
<div class="col-xs-4">
I needed to insert some text to place it on multiple rows
</div>
</div>
</div>
解决方案
The problem is that elements with float don't have a fixed height, so you cannot position it at the bottom.
That's why You have to transform into table container, and than transform the columns into table-cells to apply vertical-align:bottom. See this code bellow:
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.container {
display: table;
width: 100%;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
float:none;
}
.cell-bottom{
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</div>
<div class="col-xs-4 cell cell-bottom">
<a class="btn btn-default">
Button
</a>
<a class="btn btn-default">
Button
</a>
</div>
<div class="col-xs-4 cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</div>
</div>
</div>
</body>
</html>
这篇关于如何将列内容放置在底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
