Bootstrap 3 中列内容的垂直对齐

Question

我正在尝试水平对齐 3 列 (Bootstrap)，这些列的高度根据视口的大小而变化。如第一张图片所示，所有内容都在大屏幕上居中对齐。

当视口变小时，段落的高度会改变并且对齐会丢失。我想保持标题（蓝色）、段落和按钮对齐。

我最初的想法是为三种不同类型的元素创建三行。不幸的是，我无法这样做，因为我想将边框保留在中间列中。

无论视口大小如何，保持这三列对齐的正确方法是什么？

Answer 1

假设它们在内联容器中 vertical-align:middle;

Answer 2

我从来没有真正看到一个完美的答案，那不是 javascript，我不记得确切的代码，但是，上次我做的时候，我把文本放在一个嵌套的部分，每个框文本部分都有相同的 class，我为那个 class 分配了一个最小高度，它足够长以适合最长的文本，然后将按钮放在该部分下方.

但是，如果您将代码放在 JSFiddle 中，我可以为您提供更多帮助，

它应该看起来像这样，布局明智，

<div class="four columns">
    <img></img>

    <div class="text">  this will have a min height 
    </div>

    <input>button here</input>
</div>

我希望这对您有所帮助，我知道它看起来不是很清楚，如果您有实时版本或 JSfiddle，我非常乐意进一步提供帮助。

至于文字，你的水平很有限，有一些很好的jquery脚本，看一下http://www.unheap.com

并且只是玩一般的文字大小

Vertical alignment in column content in Bootstrap 3