【发布时间】：2014-02-19 19:19:09
【问题描述】：
我为一个网站开发了一个前端，但遇到了一个严重的问题。我使用 bootstrap 3 使网站具有响应性。
我使用网格功能进行布局，但需要满足以下要求：
- 列必须具有相同的高度
- 列之间应该有空格
第一个问题是通过 SO 出售的。我将row 设置为overflow: hidden;，将columns 设置为margin-bottom: -99999px; padding-bottom: 99999px; 这解决了列高问题，但我无法在列的外部放置空间，因为我使用了所有 12 列。 (col-md-4, col-md-4, col-md-4 / col-md-8, col-md-4) 如果我将侧边距设置为列，则最后一列包裹到下一行。
将列用作容器的另一个问题是margin-bottom 和padding-bottom 值。我无法设置border-radius，因为底部边框不可见。
使用内部容器是显而易见的。我这样做了，但内部 div 没有填充可用的高度。我做了一个 Codepen 的例子。
我尝试了以下方法：
- 将内部 div position 设置为 relative/absolute 与 bottom: 0 值
- 设置height、min-height 100% 组合
inline/block/inline-block
由于移动优先方法，我的首选是 CSS 解决方案，但我也会考虑任何其他解决方案。加载了 jQuery（引导程序的 JavaScript 组件需要）并且还加载了淘汰赛。
关于示例。目的是水色“面板”必须具有相同的高度（当然在一行内），即使其内容小于可用空间。如果您之前没有使用过 Codepen，您可以使用编辑器/整页菜单全屏查看示例。
感谢您的建议。
【问题讨论】：
标签： html css twitter-bootstrap layout twitter-bootstrap-3