Выравнивание текста внутри кнопки Bootstrap
Я заметил, что есть похожие вопросы, однако я попробовал данные решения, и ничего не получилось *
Мой пользовательский файл CSS на 100% правильно связан с html-файлом, над которым я работаю *
Я использую Bootstrap v4.3.1 *
Итак, как следует из названия, я пытаюсь выровнять текст внутри кнопки Bootstrap — мне нужно сделать это с помощью моего собственного CSS-файла.
Я создал свой новый файл style.css и связал его в заголовке (ПОСЛЕ ссылки Bootstrap CSS), затем я добавил пользовательский класс (btn1) к моей кнопке Bootstrap:
<!-- Button trigger modal -->
<button type = "button" class = "btn btn-primary btn1" data-toggle = "modal" data-target = "#exampleModal">
Launch demo modal
</button>
Затем я добавил следующий код в свой CSS:
.btn1{
text-align: left !important;
}
Но текст на кнопке по-прежнему не выровнен по левому краю. Любые идеи относительно того, почему это происходит, и способы решения проблемы?
Спасибо!
Есть ли причина, по которой вы не можете использовать встроенный класс Bootstrap text-left: <button class = "text-left">Button Text</button>? Это должно быть вашим первым шагом... только если это не сработает, тогда вы должны переопределить вручную. Кроме того, действительно ли ширина кнопки шире, чем текст кнопки + отступ?
Ответы 3
Вам нужно будет изменить отступ в вашем пользовательском css на 0, так как он все еще подбирает заполнение начальной загрузки. Затем вы можете установить ширину на любой размер, который вам нравится, и добавить собственные отступы, если хотите.
Пример:
.btn1{
text-align: left !important;
padding: 0;
width: 50px;
}
Работал как шарм. Спасибо!
Попробуйте так ?
.btn.btn1{
text-align: left;
min-width:250px;
}
note this way you don't need to add
!important
Да, я понял, что это просто вопрос увеличения ширины кнопки, в любом случае, вы играете с ней, она работает. Спасибо!
Кнопки в bootstrap являются inline-block элементами и не имеют определенной ширины. Поэтому text-align: left не работает.
Вам нужно явно указать его ширину и использовать align-left. И если вам нужно удалить левый отступ, используйте pl-0.
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container mt-5">
<div class = "row">
<div class = "col">
<button class = "btn btn-primary pl-0">Button</button>
</div>
<div class = "col">
<button class = "btn btn-primary w-100 text-left">Button</button>
</div>
<div class = "col">
<button class = "btn btn-primary pl-0 w-100 text-left">Button</button>
</div>
</div>
</div>
Кнопка не имеет определенной ширины, поэтому текст не будет выглядеть выровненным по левому краю. Выровнять по левому краю относительно чего?