Выравнивание текста внутри кнопки Bootstrap

Question

• Я заметил, что есть похожие вопросы, но я попробовал данные решения, но ничего не получилось *

• Мой пользовательский CSS-файл на 100% правильно связан с HTML-файломЯ работаю над *

• Я использую Bootstrap v4.3.1 *

Так что, как следует из названия, я пытаюсьвыровнять текст внутри кнопки Bootstrap - мне нужно сделать это с помощью моего собственного пользовательского файла CSS.

Я создал новый файл style.css и связал его в заголовке (ПОСЛЕ ссылки CSS Bootstrap), затемЯ добавил пользовательский класс (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;
}

Но текст на кнопке все еще невыровнен влево.Любые идеи о том, почему это происходит, и способы решения проблемы?

Спасибо!

Answer 1

Попробуйте таким образом ?

.btn.btn1{
  text-align: left;
  min-width:250px;
}

обратите внимание, что вам не нужно добавлять !important

Answer 2

Кнопки в начальной загрузке являются 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>

https://codepen.io/anon/pen/MMgxKz

Answer 3

Вам нужно будет изменить отступы в вашем пользовательском css на 0, так как это все еще подхватывает отступы начальной загрузки. Затем вы можете установить ширину на любой размер и добавить собственный отступ, если хотите.

Пример:

.btn1{
  text-align: left !important;
  padding: 0;
  width: 50px;
}