如何使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按鈕文字響應

回答

相關問題