如何在bootstrap中获得响应式button3

我使用引导3，我有以下的HTML：

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

在一个小屏幕上，文字“创build新的电路板”太长，不适合button。 我希望文本换行到另一行，并增加button的高度以适应文本。 有关如何做到这一点的任何提示？

Answer 1

在Bootstrap中， .btn类有一个white-space: nowrap; 属性，使得button文本不会换行。 所以，设置为normal ，并给button的width ，文本应换行到下一行，如果文本将超过设定的width 。

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

http://jsfiddle.net/ADewB/

Answer 2

我知道这已经有了明显的答案，但我觉得我有一个改进。

明显的答案有点误导。 他设置了一个宽度的button，这是没有必要的，设置宽度不“响应”。 为了辩护，他在下面的评论中提到，宽度不是必要的，只是一个例子。

在这里没有提到的一件事是，这些词可能会在一个词​​的中间打破，看起来很乱。

我的解决scheme，强制在单词之间发生中断，一个很好的单词包装。

 .btn-responsive { white-space: normal !important; word-wrap: break-word; } <a href="#" class="btn btn-primary btn-responsive">Click Here</a> 

Answer 3

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

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

Answer 4

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

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

Answer 5

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

 .btn {font-size: 3vw;} 

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

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