Кнопка bootstrap не охватывает полный текст

Question

Кнопка

bootstrap не охватывает полный текст. Я не уверен, что вызывает это и как я могу это исправить. возможно некоторые css файлы в моем css переопределяют стили (не уверен) .. как я могу это исправить. Я пробовал ширину шага, но это не помогает. Кто-нибудь может помочь?

 <button type="button" class="btn btn-sm btn-secondary" (click)="confirmModal()">Save Selection</button>

Answer 1

Есть много причин, почему это происходит. Без предоставления демо-кода / предоставления точной пользовательской версии CSS / bootstrap. Это хит и мисс, пока вы его не получите.

Попробуйте сначала:

position: relative;

Если это не сработает, вы бы окружили текст в промежутке:

<button class="btn btn-sm btn-secondary"><span style="display: block;">SAVE SELECTION</span></button>

Все остальное терпит неудачу, добавьте style="display: inline-block;" к самой кнопке

Дайте мне знать, как это происходит, если это не сработает, загрузите веб-сайт где-нибудь, может быть, в CodePen или что-то еще, и свяжите меня с там я смогу проверить и рассказать, как это исправить за несколько секунд.

Answer 2

Это потому, что btn-sm имеет максимальную ширину, вы можете создать класс или стилизовать его самостоятельно с помощью

или

.btn-width {width: auto}