如何将在小屏幕上折叠为垂直的 Bootstrap 列内容垂直居中答案

【问题标题】：How to vertical center Bootstrap column contents that collapse to vertical on small screens如何将在小屏幕上折叠为垂直的 Bootstrap 列内容垂直居中
【发布时间】：2017-09-09 11:21:10
【问题描述】：

短版：

我正在使用 Bootstrap 3.3.7 并且在我需要的地方有一行：

当屏幕足够宽时，列是水平的
水平时垂直居中的列内容
当屏幕太窄时要垂直堆叠的列

列高彼此不同或事先不可知。如何实现我的三个目标？

详情：

我的网页中有一个视觉组件，它在 LHS 上有一个图像，在 RHS 的媒体块中有一些文本。媒体块比图像高（具体多少取决于屏幕宽度和文本的环绕）。

我们使用的是 Bootstrap 3，所以基本的 HTML 是：

<Row>
  <Col md={6}>
    <img src="myimage.jpg"/>
  </Col>
  <Col md={6}>
    <div>a media block</div>
    <div>another media block</div>
    <div>etc</div>
  </Col>
</Row>

为了使视觉设计看起来干净整洁，我需要将图像垂直居中放置在 LHS 上。为此，我使用了弹性盒子：

.eq-height-cols-wrapper: {
  display: flex;
}

.eq-height-col: {
  margin-top: auto;
  margin-bottom: auto;
}

<Row class="eq-height-cols-wrapper">
  <Col class="eq-height-col">
  ...

这似乎是现代浏览器非常标准的解决方案（例如：1、2），但这意味着列不会以小屏幕宽度堆叠。

如何使未知高度的列相对于其他列垂直居中，也未知高度，以便在较小的屏幕宽度下折叠并垂直显示？

【问题讨论】：

标签： html twitter-bootstrap css vertical-alignment

【解决方案1】：

使用@media 查询仅适用于较大的屏幕。由于 md 断点在 Bootstrap 中是 992px，因此您可以使用它。 Flexbox 是vertical centering 的好方法。

@media (min-width: 992px) {
 .eq-height-cols-wrapper: {
  display: flex;
 }

 .eq-height-col: {
  margin-top: auto;
  margin-bottom: auto;
 }
}

【讨论】：