Как добавить 3 элемента в модальный заголовок Bootstrap?

Question

Мне нужен мой модал, чтобы в нем было 3 элемента: Слева: кнопка В центре: название Справа: кнопка закрытия

Когда вы смотрите на мой модал, кажется, что я достиг того, что мне нужно, но на самом деле мой заголовок не центрирован. Вот мой код:

.modal-dialog {
  max-width: 90%;
}

.modal-header {
  border: none;
}

.modal-title-filter {
  color: #2D2D2D;
  font-size: 1.2em;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Header -->
<div class="modal-header">
  <button class="btn btn-primary">Limpiar filtros</button>
  <h5 class="modal-title modal-title-filter w-100 text-center" id="exampleModalLabel">Filtros</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
</div>
<!-- /Header -->

Answer 1

Вы можете достичь чего-то подобного, настроив отображение модального заголовка на flex и выравнивая содержимое по пространству между элементами.

Примечание: мне пришлось добавить элемент margin-left:0 к кнопке закрытия, так как он имеет объявление margin-left:auto.

.modal-dialog {
  max-width: 90%;
}

.modal-header {
  border: none;
}

.modal-title-filter {
  color: #2D2D2D;
  font-size: 1.2em;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Header -->
<div class="modal-header d-flex justify-content-between align-items-center">
  <button class="btn btn-primary">Limpiar filtros</button>
  <h5 class="modal-title modal-title-filter" id="exampleModalLabel">Filtros</h5>
  <button type="button" class="close" style="margin-left:0;" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
</div>
<!-- /Header -->

Answer 2

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

.modal-header .modal-title{
  margin-left: -20px;
}

Чем выше отрицательное значение, тем заголовок будет перемещен влево или больше по центру по вашему вкусу.

Надеюсь, я тебе помог. Привет