Как сделать Bootstrap 3 Текст кнопки Ответственный

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> 

Как вы можете видеть из демки размер кнопки тест шрифта остается такой же, как в начальные моменты времени на изменение размера окна. Не могли бы вы сообщить мне, как я могу обновить id без использования элемента body?

Спасибо,

Answer 1

В то время как вы можете использовать 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

окна просмотра-процентного длины по отношению к размеру начального содержащего блока. Когда изменяется высота или ширина исходного блока , они соответственно масштабируются. Однако , когда значение переполнения на корневом элементе является авто, любая строка прокрутки считается, что она не существует. Обратите внимание, что в исходном файле, содержащем размер блока , влияет наличие полос прокрутки в окне просмотра .

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>