CSS 如何在引导程序 3 中获得响应式按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19284153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a responsive button in bootstrap 3
提问by PropertyWebBuilder
I am using bootstrap 3 and I have the following html:
我正在使用引导程序 3，我有以下 html：
<div class="col-sm-2" >
<a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>
On a small screen, the text "Create New Board" is too long to fit on the button. I would like the text to wrap on to another line and the height of the button to increase to fit the text. Any tips on how to do this?
在小屏幕上，“创建新板”文本太长而无法放在按钮上。我希望文本换行到另一行，并增加按钮的高度以适应文本。有关如何执行此操作的任何提示？
回答by MattDiamant
In Bootstrap, the .btnclass has a white-space: nowrap;property, making it so that the button text won't wrap. So, after setting that to normal, and giving the button a width, the text should wrap to the next line if the text would exceed the set width.
在 Bootstrap 中，.btn该类有一个white-space: nowrap;属性，使按钮文本不会换行。因此，在将其设置为normal并给按钮 a 后width，如果文本超出 set ，则文本应换行到下一行width。
#new-board-btn {
white-space: normal;
}
回答by Wade
I know this already has a marked answer, but I feel I have an improvement to it.
我知道这已经有一个明显的答案，但我觉得我有改进。
The marked answer is a bit misleading. He set a width to the button, which is not necessary, and set widths are not "responsive". To his defense, he mentions in a comment below it, that the width is not necessary and just an example.
标记的答案有点误导。他为按钮设置了一个宽度，这是不必要的，并且设置的宽度不是“响应式”。为了他的辩护，他在下面的评论中提到，宽度不是必需的，只是一个例子。
One thing not mentioned here, is that the words may break in the middle of a word and look messed up.
这里没有提到的一件事是，单词可能会在单词中间中断并且看起来很混乱。
My solution, forces the break to happen between words, a nice word wrap.
我的解决方案是强制在单词之间发生中断，这是一个很好的自动换行。
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
<a href="#" class="btn btn-primary btn-responsive">Click Here</a>
回答by Zim
For anyone who may be interested, another approach is using @media queries to scale the buttons on different viewport widths..
对于可能感兴趣的任何人，另一种方法是使用@media 查询在不同视口宽度上缩放按钮。
Demo: http://bootply.com/93706
回答by MartySK
In some cases it's very useful to change font-size with relative font sizing units. For example:
在某些情况下，使用相对字体大小单位更改字体大小非常有用。例如：
.btn {font-size: 3vw;}
Demo: http://www.bootply.com/7VN5OCVhhF
演示：http: //www.bootply.com/7VN5OCVhhF
1vw is 1% of the viewport width. More info: http://www.sitepoint.com/new-css3-relative-font-size/
1vw 是视口宽度的 1%。更多信息：http: //www.sitepoint.com/new-css3-relative-font-size/
回答by Priyanko
<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>
We can use btn-block for automatic responsive.
我们可以使用 btn-block 进行自动响应。
