如何使Bootstrap 3按钮文字响应

你可以请看看This Demo并让我知道如何才能使按钮内的文本响应按钮的大小？如何使Bootstrap 3按钮文字响应

<div class="container"><div class="well"> 
    <button type="button" class="btn btn-default btn-lg btn-block">Make Me Responsive!</button> 
</div></div>

从演示中可以看到，按钮测试字体大小与调整窗口大小的初始时间保持相同。你可以让我知道我如何更新身份证，而不使用body元素？

感谢，

来源

2014-09-02 Suffii

等等等等基本上你问的是如何调整按钮内的文本的大小，因为你增加了页面的宽度？ – Jay 2014-09-02 21:08:46

http://jsfiddle.net/egt32eon/4/ – Christina 2014-09-02 21:08:54

谢谢克里斯蒂娜，但我不想使用word-wrap属性。有没有其他的方式来改变调整大小的字体大小？仅使用CSS。 – Suffii 2014-09-02 21:11:30

虽然你可以使用CSS @media查询达到的效果，你也可以使用vwViewport-percentage长度，以便根据视口的宽度指定font-size：

EXAMPLE HERE

<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

视口百分比长度的相对于包含块初始的尺寸。当初始的包含块的高度或宽度发生变化时，它们将相应地缩放。但是，当根元素上溢出的值为auto时，任何滚动都假定不存在。请注意，包含块的初始大小会受到视口中存在滚动条的影响。

vw unit
等于含初始块的宽度的1％。

值得注意的是vw单元is supported in the modern web browsers（含IE9 +）。

来源

2014-09-02 21:18:44

我尝试了不同的解决方案，它工作。我在这里分享：

<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>

来源

2017-03-29 21:28:43 Uriel

如何使Bootstrap 3按钮文字响应

回答

相关问题