Question

请你看一下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>

从演示中可以看出，按钮测试字体大小与调整窗口大小时的初始时间保持一致。你可以告诉我如何在不使用body元素的情况下更新id吗？

谢谢，

Answer 1

虽然您可以使用CSS @media查询来获得结果，但您也可以使用vw Viewport-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 +）。

Answer 2

我尝试了不同的解决方案，但它确实有效。我在这里分享：

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

如何使Bootstrap 3按钮文本响应

2 个答案: