Bootstrap网格列在sm和xs设备上无法按预期工作

Question

该行有4张图像，按预期显示该行中的4张图像。 在sm和xs设备上，它应在2 x 2的网格中显示4张图像（两列两行，但第三张图像未正确对齐，因此偏离网格的位置。

https://jsfiddle.net/fjqcb2h6/

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="row countdown-row" style="margin-bottom: 60px;">
  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('#');" class="img-fluid hvr-grow" style="width:130px;cursor:pointer;" src="images/computer.png">
          <figcaption style="padding-top: 20px; font-size: 16px;"><a href="#" target="_blank">dsfdsfdsfdsf</a></figcaption>
      </figure>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('#');" class="img-fluid hvr-grow" style="cursor:pointer; width:115px;" src="images/edu.png">
          <figcaption class="img-fluid" style="padding-top: 10px; font-size: 16px;"><a href="#" target="_blank">dsfsfsdfsdfdsfsdf</a></figcaption>
      </figure>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('#');" class="img-fluid hvr-grow" style="cursor:pointer; width:120px;" src="images/kidz.png">
          <figcaption style="padding-top: 10px; font-size: 16px;"><a href="http://#"target="_blank">sdfdsfsd</a></figcaption>
      </figure>
  </div>

  <div class="col-xs-6 col-sm-6 col-md-3">
      <figure style="max-width: 100%;">
          <img onclick="Javascript: window.open('http://#');" class="img-fluid hvr-grow" style="cursor:pointer; width:115px;" src="images/mindacti.png">
          <figcaption style="padding-top: 10px; font-size: 16px;"><a href="#">dsfdsfsdfActivation</a></figcaption>
      </figure>
  </div>

</div> <!-- row end -->

Answer 1

添加以下样式

.countdown-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

Answer 2

这是由于元素的高度不同。

将高度应用于子列（在这种情况下为<figure>）将解决此问题。 请注意，高度必须等于或大于最高列子项。

figure {
  height: 200px;
}