如何在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并将按钮设为width后，如果文本超出集合width，则文本应换行到下一行。

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

http://jsfiddle.net/ADewB/

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查询来缩放不同视口宽度的按钮。

演示：http://bootply.com/93706

Answer 4

在某些情况下，使用相对字体大小调整单位更改字体大小非常有用。例如：

.btn {font-size: 3vw;}

演示： http://www.bootply.com/7VN5OCVhhF

1vw是视口宽度的1％。更多信息：http://www.sitepoint.com/new-css3-relative-font-size/

Answer 5

<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

我们可以使用btn-block进行自动响应。