html - 在 Bootstrap 2.0 中制作等高列和垂直对齐的标题

Question

在 how to make equal height columns in Twitter Bootstrap 上扩展这个问题( original fiddle ).
现在列高匹配，但我需要使标题在底部垂直对齐。

这是一个new fiddle .

如您所见，H2 字幕没有对齐。
这是我想要的样子:

开始新的:<div class="row-fluid col-wrap">不起作用，因为字幕在媒体中断时与文本分开。

Answer 1

问题

问题是，原始问题的答案几乎将每个 div 的高度设置为无限大。在内容之后，div 会一直延伸下去。

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

填充的大小适合内容:但元素会永远延伸

---

解决方案

确实知道元素结束位置的一个元素是包装器。那是它的工作。所以我们想要做的是将我们的 header 标记相对于 .col-wrap 容器定位。

为了相对于它的祖父元素定位一个元素，我们将孙元素的 position 设置为 absolute。这将相对于它找到的第一个父元素定位，其 position 等于 relative。所以我们可以通过以下代码将表头设置到col-wrap容器的底部:

HTML

<div class="row-fluid col-wrap">
    <div class="span4 col well">
        <p>left column</p>
        <h2>Title or Caption</h2>
    </div>
</div>

CSS

.col-wrap {
    overflow: hidden;
    position: relative;
}
.col-wrap > .col > h2{
    position: absolute;
    bottom: 0;
}

---

我们必须调整的一件事是，现在标题是绝对定位的，它从文档流中取出，不再占用任何空间。解决此问题的一种骇人听闻的方法是将标题标签加倍并使用一个作为占位符。

HTML

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

快速 CSS 概述:

visibility: hidden; /* hides an element but still takes up the same space*/
display: none;      /* hides an element and collapses*/

使用它:

• 在大屏幕上，我们将通过将 visibility 设置为 hidden 并将绝对标题放在其祖 parent 的底部，将相对标题用作占位符。
• 在小屏幕上，我们将折叠绝对标题，因为我们不再需要绝对定位，所以第一个仍然是内联的，我们不需要两者。

在 CSS 中，它看起来像这样:

@media (min-width: 768px) {
    .col > h2.absolute{
        position: absolute;
        bottom: 0;
    }
    .col > h2.relative{
        visibility: hidden;
    }
}
@media (max-width: 767px) {
    .col > h2.absolute{
        display: none;
    }
}

---

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

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

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

.col > h2.absolute{
    margin-left:0;
    padding-right:40px;
}

---

演示

jsFiddle

它看起来像这样: