Html 如何在小屏幕上垂直居中引导折叠为垂直的列内容

短版：

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

• 当屏幕足够宽时，列将保持水平
• 列内容在水平时垂直居中
• 当屏幕太窄时，要垂直堆叠的列

立柱高度彼此不相同，或者事先不知道。我如何实现我的三个目标

详细信息：

我的网页中有一个可视组件，在左侧有一个图像，在右侧有一些媒体块中的文本。媒体块比图像高（具体高多少取决于屏幕宽度和文本的包装）

我们使用的是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上。为此，我使用了flex Box：

.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">
  ...

.eq高度cols包装器：{
显示器：flex；
}
.eq高度栏：{
页边顶部：自动；
页边距底部：自动；
}
...

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

---

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

使用@media查询仅适用于较大屏幕。因为在引导中，

md

断点是992px，所以您应该使用它。Flexbox是一种很好的测试方法

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

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