Question

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

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

.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类，以便示例按预期工作？

Answer 1

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

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

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

根据前一个垂直居中Bootstrap 3列

1 个答案: