具有相同高度的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;
}

这是一个jsfiddle-Link来展示挑战.

编辑:添加了响应式设计的证据.

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>