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

请试试这个，希望它能运作。这将在任何屏幕尺寸

中保持按钮高度的一致性

((join "0x" "<number>") + 0)

Answer 2

您可以删除那些.btn-group并使用a-elements而不是button-elements。在.btn-group-justified中，这些元素将是表格单元格，因此具有相同的高度。

Answer 3

如果您只是试图强制所有按钮的高度和宽度相同，那么就这样做：

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

具有相同高度的Bootstrap btn-group

3 个答案: