Question

简短版：

我正在使用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），但这意味着列不会以较小的屏幕宽度堆叠。

如何将未知高度的色谱柱相对于其他色谱柱（也是未知高度）垂直居中，以便在较小的屏幕宽度下折叠并垂直显示？

Answer 1

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

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

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

如何垂直中心在小屏幕上折叠为垂直的Bootstrap列内容

1 个答案: