CSS 如何使 Bootstrap 3 按钮文本响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25632331/
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 Make Bootstrap 3 Button Text Responsive
提问by Suffii
Can you please take a look at This Demoand let me know how I can make only the text inside the buttons responsive to the size of the button?
你能看看This Demo并让我知道如何让按钮内的文本只响应按钮的大小吗？
<div class="container"><div class="well">
<button type="button" class="btn btn-default btn-lg btn-block">Make Me Responsive!</button>
</div></div>
As you can see from the demo the buttons test font size stays same as the initial times on resizing the windows. Can you please let me know how I can update id without using the body element?
正如您从演示中看到的，按钮测试字体大小与调整窗口大小的初始时间保持相同。你能告诉我如何在不使用 body 元素的情况下更新 id 吗？
Thanks,
谢谢，
回答by Hashem Qolami
While you could use CSS @mediaqueries to achieve the result, you could also use vwViewport-percentagelengths in order to specify the font-sizebased on the width of the viewport:
虽然您可以使用 CSS@media查询来实现结果，但您也可以使用vwViewport-percentage长度来指定font-size基于视口的宽度：
<button type="button" class="btn btn-default btn-lg btn-block responsive-width">
Make Me Responsive!
</button>
.responsive-width {
font-size: 3vw;
}
5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block's size is affected by the presence of scrollbars on the viewport.
vw unit
Equal to 1% of the width of the initial containing block.
5.1.2 视口百分比长度：vw、vh、vmin、vmax 单位
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。但是，当根元素上的overflow 值为auto 时，则假定任何滚动条都不存在。请注意，初始包含块的大小受视口上滚动条的影响。
vw unit
等于初始包含块宽度的 1%。
It's worth noting that vwunit is supported in the modern web browsers(including IE9+).
回答by Uriel
I tried a different solution and it worked. I share it here:
我尝试了一个不同的解决方案，它奏效了。我在这里分享：
<button type="button" class="enviaPedido btn btn-primary btn-sm">
<span class="visible-xs-block">Pedido</span>
<span class="hidden-xs">Convertir en pedido</span>
</button>
