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

标题居中，相对于容器h5居中，而不是模式标题，但是如果您希望标题相对于模式标题居中，则可以编辑标题的左边距，试试这个：

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

根据您的喜好，标题将移至左侧或更高的负值。

希望我能帮助您。问候

Answer 2

您可以通过将模式标题的显示设置为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 -->

如何在Bootstrap的模式标题中添加3个元素？

2 个答案: