Bootstrap 4 - 如何将移动模态标题居中？

Question

我是引导程序的初学者。我的网站在 bootstrap 4 下。我有一个在 PC 上的模式，它是左对齐的，这就是我想要的。在移动设备上，我希望标题从左对齐到 div 顶部，这样更易读。

目前它看起来很压扁。我怎样才能正确地做到这一点？

我尝试做显示：flex;在模态 CSS 下，但在移动设备上查看时，它仍然位于左侧，即使文本重叠，因为标题很长，也没有任何改变。

Answer 1

使用媒体查询根据屏幕尺寸调整样式。

向模态标题添加自定义类，并向媒体查询添加适当的样式：

<h5 class="modal-title modal-title-custom">Modal title</h5>

@media only screen and (max-width: 767.98px) {
  .modal-title-custom {
    text-align:center;
    width:100%;
  }
}

调整断点使标题居中：Bootstrap 4 Breakpoints

如果

text-align

不起作用，您可以尝试使用

justify-content: center;