Question

有人可以解释如何在Bootstrap 4模式中水平居中标题。

我已经尝试window[ga-disable-UA-XXXXXXXX-Y] = true;，text-center和mx-auto，但他们似乎无法工作。

这里是link的小提琴。

以下代码;

ml-0 / mr-0

Answer 1

modal-header显示：flex所以将其中心设置为＆＃39;内容（如modal-title）的工作方式不同。您可以使用mx-auto但是居中相对于关闭按钮，因此它不会完全居中。

一个选项是显示标题：阻止（d-block）并使用text-center。

https://jsfiddle.net/44v0b25k/

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header d-block">
        <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title text-center" id="exampleModalLabel">Modal title</h5>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

另一种选择是在w-100上使用modal-title以使其全宽，text-center也可以使用。

<div class="modal-header">
     <h5 class="modal-title w-100 text-center" id="exampleModalLabel">Modal title</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
     </button>
</div>

https://jsfiddle.net/306ob2e5/

Answer 2

下面我已将.foobar-container-left{display:none;} .foobar-container-right{display:none;} #foobar-message-0{width:100%;} @media only screen and (max-width:500){ #branches{width:100%;} }添加到标题中，text-center d-block添加到标题中。

问题是标题是flex，其中包含了对齐内容空间 - 将标题推向左侧。

d-inline-block

Example Bootply

Answer 3

只需将CSS应用于modal-title类，例如：

.modal-title {
    text-align: center;
    width: 100%;
}

示例：https://jsfiddle.net/vxsw0xsy/

Bootstrap 4模态中心内容

3 个答案: