我有一个使用Twitter的bootstrap的流畅布局,其中我有一行和两列。第一列有很多内容,我想正常填充跨度。第二列只有一个按钮和一些文本,我希望它们相对于第一列中的单元格进行底部对齐。
这就是我所拥有的:
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall |
| |
+----------------+
-----------------------------------------------
这是我想要的:
-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that |
| is tall | +-span6----------+
| | |short content |
+----------------+ +----------------+
-----------------------------------------------
我见过这样的解决方案:将第一个跨度设置为绝对高度,并将第二个跨度相对于它进行定位,但如果不需要指定div的绝对高度,则更可取。我也愿意彻底重新思考如何达到同样的效果。我并不喜欢这种脚手架的使用,它对我来说似乎是最有意义的。
将此布局作为小提琴进行:
发布于 2013-01-09 04:36:37
请注意:对于Bootstrap 4+用户,请考虑 (Bootstrap 4引入的flexbox,它提供了一个更优雅的CSS-only解决方案)。以下内容适用于较早版本的Bootstrap...
有关有效的解决方案,请参阅http://jsfiddle.net/jhfrench/bAHfj/。
//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
var $this = $(this);
$this.css('margin-top', $this.parent().height() - $this.height())
});
好的一面是:
按照页边距的精神,我将这个类命名为pull-down
.
-)
现在坏消息是:
发布于 2015-01-29 02:51:20
这是Bootstrap 3的更新解决方案(不过应该适用于旧版本),它只使用CSS/LESS:
http://jsfiddle.net/silb3r/0srp42pb/11/
将行上的font-size设置为0(否则将导致列之间出现讨厌的空格),然后删除列浮动,将display设置为inline-block
,重新设置它们的font-size,然后可以将vertical-align
设置为所需的任何值。
不需要jQuery。
发布于 2016-01-25 06:29:15
您可以使用flex:
@media (min-width: 768px) {
.row-fluid {
display: flex;
align-items: flex-end;
}
}
https://stackoverflow.com/questions/13841387
复制相似问题