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

Posted 2023-03-05

【中文标题】根据前一个垂直居中Bootstrap 3列[重复]

【英文标题】：Vertically center Bootstrap 3 column according to previous one [duplicate]

【发布时间】：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 类以使示例按预期工作吗？

【参考方案1】：

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

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

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

【讨论】：

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