Bootstrap Row在移动设备上分崩离析

Question

我有一排4个产品，基本上是这样的：

<div class="row">

  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>
  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>
  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>
  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>

</div>

这在桌面上看起来很棒：

然而，在移动设备上，它分崩离析：

所有图像都具有相同的高度，因此我认为这是由于字幕长度不同所致。我不想在<div class="text">设置一个高度，因为我不能保证标题适合它。

CSS中是否有一种聪明的方法（如果必须，还有jQuery）将字幕的高度设置为等于行中最高的标题？这也必须触发浏览器调整大小。

由于

Answer 1

实际上，每隔第n行使用clearfix元素只会出现在某些断点上。

<div class="clearfix visible-xs-block"></div>

每隔一个元素放置此clearfix元素，您可以将其设置为visible-xs-block，以便仅显示在xs上。

 <div class="col-xs-6 col-sm-3">
    /* .. */
 </div>
 <div class="col-xs-6 col-sm-3">
    /* .. */
 </div>
 <div class="clearfix visible-xs-block"></div>
 <div class="col-xs-6 col-sm-3">
    /* .. */

..等等。

  

clearfix是元素自动清除其子元素的一种方式

来自Madara Uchiha