css - 具有相同高度的 Bootstrap btn-group

Question

我正在使用 Bootstrap3，并且我在 行 中有一些按钮。为了根据屏幕尺寸具有相同的宽度，我使用 btn-group-justified 并且效果很好。但是我的按钮标签有一些文字和字形，我通过 white-space:normal 设置了换行的可能性。 但在这种情况下，按钮有时会出现错误的高度。如何强制所有按钮具有相同的高度？

<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>