Вертикальное выравнивание в содержимом столбца в Bootstrap 3

Question

Я пытаюсь горизонтально выровнять 3 столбца (Bootstrap) с переменной высотой в зависимости от размера порта представления. Как видно на первом снимке, все сосредоточено и выровнено на больших экранах.

Когда окно просмотра становится меньше, высота абзаца изменяется и выравнивание теряется. Я бы хотел, чтобы заголовки (синий), абзацы и кнопки были выровнены.

Моя внутренняя мысль заключалась в том, чтобы создать три строки для трех различных типов элементов. К сожалению, я не смогу этого сделать, так как я хочу сохранить границу в среднем столбце.

Что бы правильный способ сохранения выравнивания этих трех столбцов, независимо от размера окна просмотра?

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

и просто общая игра с текстом размерами

Answer 2

Предполагая, что они находятся в инлайн containe vertical-align:middle;