如何在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的高度以适应文本。 有关如何做到这一点的任何提示?

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

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

http://jsfiddle.net/ADewB/

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

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

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

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

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

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

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

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

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

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

 .btn {font-size: 3vw;} 

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

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