Bootstrap 4 中的垂直对齐内容 - 如何防止移动设备上的水平溢出？答案

【问题标题】：Vertically Align content in Bootstrap 4 - How do I prevent horizontal overflow on mobile devices?Bootstrap 4 中的垂直对齐内容 - 如何防止移动设备上的水平溢出？
【发布时间】：2018-08-16 15:46:06
【问题描述】：

我在登录表单上的注册页面遇到问题 - 我使用了 Bootstrap 4 提供的 Flex 和 Vertical Align 类来垂直居中我的 div。

它在平板电脑和更大的设备上完美运行，但我遇到了移动设备上内容溢出的问题：

有人知道解决方法吗？或者我会更好地使用不同的方法来对齐我的内容吗？

这里是相关页面的链接：http://shaneprice.co.uk/horizontal-overflow/

提前感谢您对该问题的任何支持。

【问题讨论】：

标签： html css flexbox bootstrap-4 vertical-alignment

【解决方案1】：

将py-auto 类添加到您的内容中。

如果您想知道，py 表示padding-top/padding-bottom

Reference

【讨论】：

可爱！我将 my-auto 添加到我的专栏中，它修复了溢出问题。

【解决方案2】：

这个也可以

.panel-logo img {
    width: 100%;
    max-width: 250px;
}

【讨论】：