css - 如何在 bootstrap 3 中获得响应式按钮

Question

我正在使用 bootstrap 3，我有以下 html:

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

在小屏幕上，文本“Create New Board”太长，无法显示在按钮上。我希望文本换行到另一行，并增加按钮的高度以适合文本。有关如何执行此操作的任何提示？

Answer 1

在 Bootstrap 中，.btn类有一个 white-space: nowrap;属性，使按钮文本不会换行。所以，在将其设置为 normal 之后, 并给按钮一个 width ，如果文本超过集合 width，文本应该换行到下一行.

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

http://jsfiddle.net/ADewB/