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

Question

Предположим, что у вас есть макет в две колонки с использованием Twitter Bootstrap, в которой вы хотите иметь определенные строки вертикально выровненных друг с другом:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 1</h2> 
 
     <p>Optional content of variable height.</p> 
 
     <p><strong>Align this vertically...</strong></p> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 2</h2> 
 
     <p><strong>...with this</strong></p> 
 
    </div> 
 
    </div> 
 
</div>

Вертикальное выравнивание возможно с использованием табличных макетов, однако теряется соотношение размеров и чувствительности столбцов Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <table class="row"> 
 
    <thead> 
 
     <tr> 
 
     <th scope="col"><h2>Column 1</h2></th> 
 
     <th scope="col"><h2>Column 2</h2></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td><p>Optional content of variable height.</p></td> 
 
     </tr> 
 
     <tr> 
 
     <td><strong>Align this vertically...</strong></td> 
 
     <td><strong>...with this</strong></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Другой вариант состоит в том, чтобы разделить строки, однако макет сбрасывается в неправильном порядке при меньших разрешениях.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 1</h2> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 2</h2> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <p>Optional content of variable height.</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <strong>Align this vertically...</strong> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <strong>...with this</strong> 
 
    </div> 
 
    </div> 
 
</div>

Как достичь того же результата, сохраняя при этом поведение столбцов Bootstrap в? Использует ли табличный макет путь, или это тупик? Возможно ли иное, не прибегая к JavaScript, чтобы расположить строку к вычисленному смещению?

EDIT: Я стараюсь, чтобы вершина строк была выровнена, как в случае с таблицей.

Answer 1

Для чего я знаю, я бы испытал эти решения.

Решение 1: Использование Javascript (Jquery, если вы хотите), чтобы определить высоту левого и правого div и сообщить им, что они имеют одинаковую высоту.

Вы можете применить это решение во втором абзаце контента, чтобы сделать espace над жирным шрифтом с одинаковой высотой.

Или добавить, например, в качестве крайнего края по мере необходимости в меньшем div (с жирным текстом, который необходимо выровнять) после сравнения высот обоих.

В любом случае, если у вас есть обе их высоты, у вас будет достаточно информации, чтобы найти способ. Здесь возможны варианты многоточия, я позволяю вам найти лучшее для вашего контекста и потребностей.

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 leftcolumn"> 
     <h2>Column 1</h2> 
     <div class="astallas"><p>Optional content of variable height.</p></div> 
     <p><strong>Align this vertically...</strong></p> 
    </div> 
    <div class="col-sm-6 rightcolumn"> 
     <h2>Column 2</h2> 
     <div class="astallas"></div> // make this empty div have the same height that the left one with variable content 
     <p><strong>...with this</strong></p> 
    </div> 
    </div> 
</div> 

Решение 2 (но с некоторыми браузерами incompatibilties): Используйте Flexbox < 3, который является родным CSS3 fonctionnaly, которые дают вам простой способ иметь позиции ваших Wanted дивы. http://flexboxfroggy.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Я думаю, что обе эти работы с начальной загрузки и будет уважать реагирующие потребности.

Answer 2

Вы можете сделать что-то вроде этого, чтобы получить строки из равных высот:

<style> 
.centered { 
    text-align: center; 
    font-size: 0; 
    } 

.centered .myheight{ 
    float: none; 
    display: inline-block; 
    text-align: left; 
    font-size: 13px; 
    vertical-align: top; 
    margin-bottom: 5px; /*add this if you want to give some gap between the rows. */ 
    } 
</style> 


<div class="container-fluid"> 
<div class="row centered"> 
    <div class="col-sm-4 myheight"> 
     Some content 
    </div> 
    <div class="col-sm-4 myheight"> 
     Some content ...<br> 
     Some more content 
    </div> 
    <div class="col-sm-4 myheight"> 
     Some content 
    </div> 
    <div class="col-sm-4 myheight"> 
     Some content 
    </div>                
</div> 
</div>