html - Bootstrap 3 中列内容的垂直对齐

Question

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

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

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

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

Answer 1

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

但是，如果您将代码放在 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

一般玩玩文字大小