根据前一个垂直居中Bootstrap 3列[重复]答案

【问题标题】：Vertically center Bootstrap 3 column according to previous one [duplicate]根据前一个垂直居中Bootstrap 3列[重复]
【发布时间】：2014-12-27 14:57:15
【问题描述】：

我有两个引导列。在小型设备上，第二列应该换行并显示在新行中。在其他设备上，这两列应彼此相邻显示。第一列高于第二列，但高度不同。如果（且仅当）两列彼此相邻显示，我想根据第一列垂直居中显示第二列。如果它们显示在彼此下方，则不应有多余的空间。

请看以下示例（全屏运行并调整浏览器窗口大小）。

.row {
  border: 1px solid;
}
.flatcol {
  background-color: #009966;
}
.highcol {
  background-color: #0099FF;
  height: 75px; /* this will be changed, fixed value only for testing purposes */
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 highcol">a</div>
    <div class="col-md-4 flatcol">b</div>
  </div>
</div>

我尝试在第二列中使用vertical-align:middle，但没有任何改变。

您知道如何修改flatcol CSS 类以使示例按预期工作吗？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用媒体查询仅在更宽的屏幕上显示列 inline..

@media screen and (min-width: 992px) {
  .col-md-4 {
    vertical-align: middle;
    display: inline-block;
    float:none;
  }
}

演示： http://www.bootply.com/FiSIZAvCBC

【讨论】：

太好了，正是我想要实现的，谢谢！