如何在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>

在小屏幕上,文本"创建新板"太长,无法放在按钮上.我希望文本换行到另一行,按钮的高度增加以适应文本.关于如何做到这一点的任何提示？

Answer 1

在Bootstrap中,.btn类具有一个white-space: nowrap;属性,使得按钮文本不会换行.因此,在将其设置为normal并给出按钮a之后width,如果文本超出该集,则文本应该换行到下一行width.

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

但是,设置按钮的宽度会失去响应按钮的目的. (13认同)
你不必设置宽度,bootstrap会为你设置它.我只是用一个设定的宽度来说明当按钮的宽度超过它的最大值时,将"white-space"设置为"normal"会使按钮换行.`white-space:normal;`做所有工作. (7认同)
我也很想创建一个类,而不是调用它.multi-line-button调用它.text-wrap(因为已经有一个名为.text-nowrap的Bootstrap类)所以你要把它保存为尽可能抽象,确保其在非按钮项目上的可接受使用. (4认同)
我会把它变成一个类(所以你可以在所有按钮上重复使用它)并删除宽度:`.multi-line-button {white-space:normal; }` (3认同)

Answer 2

我知道这已经有一个明显的答案,但我觉得我有一个改进.

明显的答案有点误导.他为按钮设置了一个宽度,这是不必要的,并且设置的宽度不是"响应".为了他的辩护,他在下面的评论中提到,宽度不是必要的,只是一个例子.

这里没有提到的一件事是,单词可能在一个单词的中间打破并且看起来搞砸了.

我的解决方案,强制在单词之间发生中断,一个很好的自动换行.

.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}

<a href="#" class="btn btn-primary btn-responsive">Click Here</a>

Answer 3

对于可能感兴趣的任何人,另一种方法是使用@media查询来缩放不同视口宽度上的按钮.