Как получить кнопку реагировать в загрузчике 3

Я использую самозагрузку 3 и у меня есть следующий HTML:Как получить кнопку реагировать в загрузчике 3

<div class="col-sm-2" > 
    <a id="new-board-btn" class="btn btn-success" >Create New Board</a> 
</div>

На маленьком экране, текст «Создать новый совет» слишком велико, чтобы поместиться на кнопка. Я хотел бы, чтобы текст обернулся на другую строку, а высота кнопки увеличилась, чтобы соответствовать тексту. Любые советы о том, как это сделать?

источник

2013-10-09 klavado

Просьба примера [jsBin] (http://jsbin.com) с этим вопросом. – nietonfir

В Bootstrap класс .btn имеет свойство white-space: nowrap;, что делает его невозможным. Итак, после установки этого значения на normal и при нажатии кнопки width текст должен быть перенесен на следующую строку, если текст превысит установленный width.

#new-board-btn { 
    white-space: normal; 
}

http://jsfiddle.net/ADewB/

источник

2013-10-09 22:58:50 MattDiamant

+12

Установка ширины для кнопки поражает цель чувствительной кнопки. –

вам не нужно устанавливать ширину, bootstrap установит ее для вас. Я просто использовал ширину набора, чтобы проиллюстрировать, что установка 'white-space' в' normal' заставит кнопку обернуть, когда ширина кнопки превысит ее максимальную. 'white-space: normal;' выполняет всю работу. – MattDiamant

Я бы сделал его классом (чтобы вы могли повторно использовать его на всех ваших кнопках) и удалить ширину: '.multi-line-button { white-space: normal; } ' – ochi

Для тех, кто может быть заинтересован, другой подход использует @media запросов для масштабирования кнопок разной ширины окна просмотра ..

Demo: http://bootply.com/93706

источник

2013-11-13 15:37:22 ZimSystem

Меньшие кнопки на меньших экранах - сложнее нажать для людей с жирными пальцами –

@ geo1701 К сожалению, меньшее разрешение не всегда означает меньший экран. – raacer

<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>

Мы можем использовать btn-блок для автоматического реагирования.

источник

2014-08-20 07:09:25 Priyanko

это не работает, см. Http://jsfiddle.net/ypcrumble/ns3wro3j/ – YPCrumble

это не так – Carlos

Я знаю, что это уже имеет заметный ответ, но я чувствую, что у меня есть улучшение.

Отмеченный ответ немного вводит в заблуждение. Он установил ширину на кнопку, которая не нужна, и заданные ширины не являются «отзывчивыми». К его защите он упоминает в комментарии ниже, что ширина не нужна и просто пример.

Одна вещь, не упомянутая здесь, заключается в том, что слова могут сломаться посреди слова и выглядеть испорченными.

Мое решение заставляет перерыв между словами, приятным переносом слов.

.btn-responsive { 
    white-space: normal !important; 
    word-wrap: break-word; 
} 

<a href="#" class="btn btn-primary btn-responsive">Click Here</a>

источник

2015-09-18 16:02:54

Спасибо за ваш вклад - это действительно улучшение, поэтому я дал ему преимущество. – klavado

Сделайте кнопку удлиненной вертикальной, что очень уродливо. – mur7ay

@ mur7ay - Это ваше мнение. На мой взгляд, гораздо труднее читать (и уродливее), когда текст кнопки не обертывается должным образом. Хотя изменение размера на основе 'vw' уменьшило бы текст и было бы лучше. Существует много раз, когда можно сломать слово, или у вас есть большинство проверок на месте (т. Е. С помощью 'vw'), но хотите, чтобы он обертывался должным образом, если все остальное терпит неудачу. –

В некоторых случаях очень полезно изменить размер шрифта с помощью относительных размеров шрифтов. Например:

.btn {font-size: 3vw;}

Демонстрация: http://www.bootply.com/7VN5OCVhhF

1vw составляет 1% от ширины окна просмотра. Более подробная информация: http://www.sitepoint.com/new-css3-relative-font-size/

источник

2016-02-17 21:15:05 MartySK

@media (max-width: 768px) { 
 
    .btn-responsive { 
 
    padding:2px 4px; 
 
    font-size:80%; 
 
    line-height: 1; 
 
    border-radius:3px; 
 
    } 
 
} 
 

 
@media (min-width: 769px) and (max-width: 992px) { 
 
    .btn-responsive { 
 
    padding:4px 9px; 
 
    font-size:90%; 
 
    line-height: 1.2; 
 
    } 
 
}

<div class="col-sm-2" > 
 
    <a href="#" id="new-board-btn" class="btn btn-success btn-responsive" >Create New Board</a> 
 
</div>

источник

2018-01-26 10:19:49

Как получить кнопку реагировать в загрузчике 3

ответ

Смежные вопросы