如何在引导流体布局中对齐网格元素 [英] How do I bottom-align grid elements in bootstrap fluid layout

问题描述

我有一个流行的布局使用Twitter的引导，其中我有一个两列的行。第一列有很多内容，我想正常填充跨度。第二列只有一个按钮和一些文本，我想相对于第一列中的单元格底部对齐。

I have a fluid layout using Twitter's bootstrap, wherein I have a row with two columns. The first column has a lot of content, which I want to fill the span normally. The second column just has a button and some text, which I want to bottom align relative to the cell in the first column.

这里是我有：

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

这里是我想要的：

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

我见过的解决方案使第一个跨度是一个绝对高度，并将第二个跨度相对于它， t必须指定我的div的绝对高度将是首选。我也开放了一个完全重新思考如何实现相同的效果。

I've seen solutions that make the first span an absolute height, and position the second span relative to it, but a solution where I didn't have to specify the absolute height of my divs would be preferred. I'm also open to a complete rethink of how to achieve the same effect. I'm not married to this use of the scaffolding, it just seemed to make the most sense to me.

这个布局作为一个小提琴：

http://jsfiddle.net/ryansturmer/A7buv/3 /

推荐答案

请参阅 http://jsfiddle.net/jhfrench/bAHfj/ 了解工作解决方案。

See http://jsfiddle.net/jhfrench/bAHfj/ for a working solution.

//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())
});

在正面：

• 本着 Bootstrap现有的助手类的精神，我将该类命名为下拉菜单。


• 只有被拉下的元素需要分类，所以...


• ...它可以重复使用不同的元素类型（div，span，section，p等）


• 它是相当支持（所有主要的浏览器支持margin- ）

• in the spirit of Bootstrap's existing helper classes, I named the class pull-down.
• only the element that is getting "pulled down" needs to be classed, so...
• ...it's reusable for different element types (div, span, section, p, etc)
• it's fairly-well supported (all the major browsers support margin-top)

现在的坏消息：

这篇关于如何在引导流体布局中对齐网格元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！