Как получить ту же высоту на двух столбцах Bootstrap?

Question

У меня есть две колонки, которые я хочу иметь в одном и том же месте. Оба регулируют высоту после содержимого (высота авто). Поэтому иногда одна из моих колонок имеет большую высоту, чем другую. И я хочу, чтобы они были на одной высоте (и настраивались после контента).

Я попытался решить эту проблему с помощью table-cell, но я did'nt получить его на работу (один из столбцов всегда был 10px или так меньше, чем другой). Я также пытался использовать row-eq-height, но это не имело никакого значения.

Так может ли кто-нибудь сказать мне, что лучший способ - получить два столбца BS Paralell (col-md-3 и col-md-7 в коде), чтобы получить ту же высоту и автоматически отрегулировать контент?

Вот мой Markup:

<div class="row"> <!-- START BS ROW --> 
    <div class="col-md-1"> <!-- START BS COL-MD-1 --> 
    </div> <!-- END BS COL-MD-1 --> 
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 --> 
     <div class="singleheader-list-style"> <!-- START SINGLEHEADER-LIST-STYLE --> 
      <!-- CONTENT --> 
     </div> 
    </div> <!-- END BS COL-MD-3 --> 
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-7 --> 
     <div class="singleheader-content-style"> <!-- START SINGLEHEADER-CONTENT-STYLE --> 
      <!-- CONTENT --> 
     </div> <!-- END SINGLEHEADER-CONTENT-STYLE --> 
    </div> <!-- END BS COL-MD-7 --> 
    <div class="col-md-1"> <!-- START BS COL-MD-1 --> 
    </div> <!-- END BS COL-MD-1 --> 
</div> <!-- END BS ROW --> 

Вот мой CSS:

/***** SINGLEHEADER CONTENT AREA STYLING *****/ 

.singleheader-content-style { 
    background-color:#fff; 
    border-right: 1px solid #9c9c9c; 
    padding:20px; 
} 

.singleheader-content-style h1,h2,h3,h4,h5,h6 { 
    margin-top:0px; /* Change bootstrap default */ 
    color:#de1b1b; 
} 

/***** SINGLEHEADER LIST AREA STYLING *****/ 

.singleheader-list-style { 
    background-color:#fff; 
    border-left: 1px solid #9c9c9c; 
    border-right: 1px solid #9c9c9c; 
    padding:20px; 
} 

.singleheader-list-style h1,h2,h3,h4,h5,h6 { 
    margin-top:0px; /* Change bootstrap default */ 
    color:#de1b1b; 
} 

Я знаю, что это вопросы было предложено до на SO, но те QA старые (с 2013 года). И так как я думаю, Boostraps был обновлен с тех пор. Я создаю новый вопрос, чтобы узнать, как наилучшим образом решить эту проблему в 2015 году.

Да, я знаю, что здесь задают этот вопрос здесь: How can I make Bootstrap columns all the same height?, но это QA с 2013 года. Я хочу знать, есть ли лучший способ решить это сейчас adays, с примером flex-box и как это сделать. Я смотрю здесь: http://getbootstrap.com.vn/examples/equal-height-columns/ Но это не работает для меня.

Answer 1

Я думаю, что вы можете использовать это (метод Flexbox), просто добавьте класс row-eq-height у класса row с CSS, как показано ниже (и немного изменить свой CSS)

HTML

<div class="row row-eq-height"> 
    <!--Whatever content you want--> 
</div> 

CSS

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.singleheader-list-style { 
    background-color:#fff; 
    border-left: 1px solid #9c9c9c; 
    border-right: 1px solid #9c9c9c; 
    padding:20px; 
    height:100% /*--New Attribute--*/ 
} 
.singleheader-content-style { 
    background-color: #fff; 
    border-right: 1px solid #9c9c9c; 
    height: 100%; /*--New Attribute (just for sure in case your left col taller)--*/ 
    padding: 20px; 
} 

Hopr эта помощь для вас!

Answer 2

Вы можете использовать jquery для этого. Получите высоту более высокого элемента и установите его на меньший. Существует stackoverflow question about that, и я использовал его в прошлом, и он работает.