Бутстрап-колонны с одинаковыми высотами

Я использую систему компоновки сетки bootstrap, и я хочу добиться чего-то вроде этого:

Идея состоит в том, что col1 и col2 должны иметь ту же высоту, что и col3 и col4.

Есть ли способ сделать это, не указав высоту контейнера и установив высоту 100% на дочерние элементы, как это было в этом примере?

Ответы

Ответ 1

Чтение: Как я могу сделать столбцы Bootstrap одинаковой высоты?

Вы можете использовать:

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Вот пример:

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.row1 {
  height: 100%;
}

.col1{
  background-color: red;
  color: white;
  height: 100%;
}

.col2{
  background-color: green;
  color: white;
  height: 100%;
}

.col3{
  background-color: yellow;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row row1">
      <div class="col col1 col-xs-3">
          Column 1
      </div>
      <div class="col col2 col-xs-3">
          Column 2 
      </div>
      <div class="col col3 col-xs-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>
</div>

Ответ 2

Вы можете попробовать использовать display: flex следующим образом:

.row-full-height {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Здесь рабочий скрипт

.col1 {
  background-color: red;
  color: white;
}

.col2 {
  background-color: green;
  color: white;
}

.col3 {
  background-color: yellow;
}

.row-full-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

<div class="container">
  <div class="row row-full-height row1">
    <div class="col col1 col-md-3">
      Column 1
    </div>
    <div class="col col2 col-md-3">
      Column 2
    </div>
    <div class="col col3 col-md-3">
      <div class="row">
        Column 3
      </div>
      <div class="row">
        Column 4
      </div>
    </div>
  </div>
</div>