Html 在Bootstrap 2.0中创建等高列和垂直对齐的标题

在（）上展开此问题。
现在，列高度匹配，但我需要使标题在底部垂直对齐

这是一本书

如您所见，H2标题没有对齐。
以下是我希望它的外观：

以开始新的：

不起作用，因为在媒体休息时字幕与文本分开。

问题出在哪里 问题是，原始问题的答案几乎将每个div的高度设置为无穷大。在内容之后，div只是不断地延伸

缺点是我们不知道这个元素的底部在哪里。

填充的大小取决于内容： 但这种元素会一直延伸下去

---

解决办法 确实知道该元素结束位置的一个元素是包装器。那是我的工作。因此，我们要做的是相对于

.col wrap

容器定位标题标记

要相对于元素的祖父母定位元素，我们将孙辈

位置设置为
绝对值
。这将相对于找到的第一个父元素进行定位，其
位置
等于
相对
。因此，我们可以使用以下代码将标题设置到
col wrap
容器的底部：

HTML


左列

标题

CSS

.col wrap{
溢出：隐藏；
位置：相对位置；
}
.col wrap>.col>h2{
位置：绝对位置；
底部：0；
}


我们必须进行调整的一件事是，现在标题已完全定位，它已从文档流中移除，不再占用任何空间。解决这个问题的一种方法是将标题标记加倍，并将其中一个用作占位符

HTML

<h2 class='absolute'>Title or Caption</h2>
<h2 class='relative'>Title or Caption</h2>

利用这一点：


在大屏幕上，我们将使用相对标题作为占位符，方法是将
可见性设置为
隐藏
，并将绝对标题定位在其祖父母的底部

在一个小屏幕上，我们将折叠绝对标题，因为我们不再需要绝对定位，所以第一个仍然是内联的，我们不需要两者

在CSS中，它将如下所示：

@介质（最小宽度：768px）{
.col>h2.absolute{
位置：绝对位置；
底部：0；
}
.col>h2.relative{
可见性：隐藏；
}
}
@介质（最大宽度：767px）{
.col>h2.absolute{
显示：无；
}
}


最后，由于
h2
元素是绝对定位的，因此列不再像容器一样防止文本溢出。我们可以通过对可见的绝对定位元素应用一些大小限制来解决这个问题。这些操作应模仿占位符约束，以便它们对齐

我们可以将
span4
类应用于绝对标题以及以下css

标题或标题

.col>h2.absolute{
左边距：0；
右边填充：40px；
}


演示
它将如下所示：

如果您在问题中提及该问题，则添加一个指向该问题的链接可能会很有用。我在您的小提琴中没有看到任何H2列。。。你这是什么意思？特雷弗：谢谢。我没有意识到JSFIDLE在进行更新时会更改url。新链接有问题，请点击这里-亚历克赛：谢谢。我添加了原始问题和其中引用的小提琴的链接。这里是一个链接，指向一张图片，显示标题/标题沿行底部垂直居中。这就是我们想要的样子。哇！我非常感动和感激。非常感谢您的详细解释，例如，相对和绝对设置。但愿我有足够的代表投票支持这个答案。很高兴能帮上忙！请记住，对于您在StackOverflow上发布的此问题和其他问题，最好的答案是什么。