twitter bootstrap - установка высоты столбца на основе максимальной высоты столбца

Question

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

Скрипач:https://jsfiddle.net/ebwwvy6m/11/

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-2 bg-warning"> 
     This is a col-sm-2 
     Some test content 
     Some test content 
     Some test content 
     Some test content 
    </div> 
    <div class="col-sm-6 bg-success"> 
     .col-sm-6 
    </div> 
    <div class="col-sm-4 bg-info"> 
     .col-sm-4  
     Some test content 
     Some test content 
    </div> 
    </div> 
</div> 

Выпуск:

Обе колонки 2 и столбец 3 следует расширить, чтобы иметь такую ​​же высоту, что и колонны 1.

Любая помощь/предложение wil Я очень благодарен.

Answer 1

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

Добавьте этот класс к классу строк.

<div class="container-fluid"> 
    <div class="row-eq-height row"> 
    <div class="col-sm-2 bg-warning"> 
     This is a col-sm-2 
     Some test content 
     Some test content 
     Some test content 
     Some test content 
    </div> 
    <div class="col-sm-6 bg-success"> 
     .col-sm-6 
    </div> 
    <div class="col-sm-4 bg-info"> 
     .col-sm-4  
     Some test content 
     Some test content 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/ebwwvy6m/16/

Answer 2

Добавьте свой собственный класс и установите высоту.

Answer 3

Вариант 1 (для layzy)

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-2 bg-warning my-super-class"> 
     This is a col-sm-2 
     Some test content 
     Some test content 
     Some test content 
      Some test content 
    </div> 
    <div class="col-sm-6 bg-success my-super-class"> 
     .col-sm-6 
    </div> 
    <div class="col-sm-4 bg-info my-super-class"> 
     .col-sm-4  
     Some test content 
     Some test content 
    </div> 
    </div> 
</div> 


.my-super-class { 
    min-height: 12em; 
} 

Вариант 2: дать идентификатор седловины, в захват сказал DOMElement их идентификаторов в JavaScript. Затем проверьте самый большой из них и используйте это значение, чтобы установить (min-) height для всех.

Answer 4

Лучший способ сделать это с помощью display:flex; на родителе row и на col.

Demo.

.example { 
 
    display: flex; 
 
} 
 
.example .exaple-items { 
 
    display: flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row example"> 
 
    <div class="col-sm-2 bg-warning exaple-items"> 
 
     This is a col-sm-2 
 
     Some test content 
 
     Some test content 
 
     Some test content 
 
     Some test content 
 
    </div> 
 
    <div class="col-sm-6 bg-success exaple-items"> 
 
     .col-sm-6 
 
    </div> 
 
    <div class="col-sm-4 bg-info exaple-items"> 
 
     .col-sm-4  
 
     Some test content 
 
     Some test content 
 
    </div> 
 
    </div> 
 
</div>

С flextbox новая функция проверки CSS совместимость браузера: caniuse.com

И использовать vendor prefix:

.example { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
} 

Если вы хотите узнать больше о display:flex; прочитать: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

P.S. У этой функции встроена функция new bootstrap v4.