Bootstrap btn-group с одинаковой высотой

Question

Я использую Bootstrap3, и у меня есть кнопки в row. Для той же ширины, которая зависит от размера экрана, я использую btn-group-justified, и он работает хорошо. Но на ярлыках моих кнопок есть несколько слов и глификонов, и я установил возможность переломов на white-space:normal. Но в этом случае кнопки имеют несколько раз неправильные height. Как заставить все кнопки иметь одинаковые height?

<div class="btn-group-justified"> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Button one</button> 
    </div> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Button Two</button> 
    </div> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Button Three and Breaky</button> 
    </div> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Button Four</button> 
    </div> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Button Five</button> 
    </div> 
</div> 

И мой стиль:

button { 
    white-space: normal !important; 
} 

Here is a jsfiddle-Link to show the challenge.

Редактировать: Добавлены данные о адаптивном дизайне.

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 

    var highestBox = 0; 
     $('.btn-group-justified .btn').each(function(){ 
       if($(this).height() > highestBox){ 
       highestBox = $(this).height(); 
     } 
    });  
    $('.btn-group-justified .btn').height(highestBox); 

}); 
</script> 

Answer 2

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

button { 
    white-space: normal !important; 
    height: 50px; 
    width: 100px; 
} 

Answer 3

Вы можете удалить эти .btn-группу и использовать а-элементы вместо кнопок-элементов. В пределах .btn-group-justified эти элементы будут являться ячейками таблицы и, следовательно, имеют одинаковую высоту.