如何在Bootstrap 3中获得响应式按钮 [英] How to get a responsive button in bootstrap 3

问题描述

我正在使用引导程序3，并且具有以下html:

I am using bootstrap 3 and I have the following html:

<div class="col-sm-2" >
    <a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>

在小屏幕上，创建新板"文本太长而无法容纳在按钮上.我想将文本换行到另一行，并希望按钮的高度增加以适合文本.有关如何执行此操作的任何提示?

On a small screen, the text "Create New Board" is too long to fit on the button. I would like the text to wrap on to another line and the height of the button to increase to fit the text. Any tips on how to do this?

推荐答案

在Bootstrap中，.btn类具有white-space: nowrap;属性，以使按钮文本不会自动换行.因此，在将其设置为normal并给按钮一个width之后，如果文本超过设置的width，则文本应换行到下一行.

In Bootstrap, the .btn class has a white-space: nowrap; property, making it so that the button text won't wrap. So, after setting that to normal, and giving the button a width, the text should wrap to the next line if the text would exceed the set width.

#new-board-btn {
    white-space: normal;
}

http://jsfiddle.net/ADewB/

这篇关于如何在Bootstrap 3中获得响应式按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！