如何在自举流体布局中对齐网格元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

我使用Twitter的引导程序进行流式布局,其中我有两列的行。第一列有很多内容,我想正常填写范围。第二列只有一个按钮和一些文本,我想在第一列中相对于单元格对齐。

这是我的:

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

这是我想要的:

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

我已经看到了解决方案,使第一跨度绝对高度,并定位第二跨度相对于它,但一个解决方案,我不必指定我的div的绝对高度将是首选。我也很乐意对如何达到同样效果进行彻底的反思。

提问于
用户回答回答于

//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现有的帮助类的精神,我命名了这个类pull-down
  • 只有被“拉下来”的元素需要归类,所以......
  • ...它可以重复使用不同的元素类型(div,span,section,p等)
  • 它得到了很好的支持(所有主流浏览器都支持margin-top)

现在是坏消息:

  • 它需要jQuery
  • 它不是,写成,响应(对不起)
用户回答回答于

这是Bootstrap 3的更新解决方案(尽管适用于旧版本),但仅使用CSS / LESS:

http://jsfiddle.net/silb3r/0srp42pb/11/

你在行上设置字体大小为0(否则你最终会在列之间产生讨厌的空间),然后删除浮动列,将显示设置为inline-block,重新设置它们的字体大小,然后vertical-align可以设置为任何你需要的。

不需要jQuery。

扫码关注云+社区