将元素与前一行的底部对齐

Question

我正在使用angular加载服务器中的项目列表，并使用以下方式在页面上显示：

<div class="col-sm-6 col-md-4" ng-repeat="activity in activities">
    <img ng-src="[[ act.icon ]]" height="100" alt="">
    <h3>[[ act.title ]]</h3>
    <a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
    <p>[[ act.description ]]<br>
        Duration: [[ activity.num_times ]] time<br>
        Points: [[ activity.points ]]<br>
    </p>
</div>

如您所见，小显示屏应显示每行有2个活动，中等和最高3个宽。我遇到的问题是并非所有行都显示所需的活动数量。我的意思可以在下面的图片中看到。

这与某些活动比其他活动有更多文本的事实有关，因此它们的高度更高。下面的行将在可能的最高点插入下一个活动，通常会弄乱格式化。

我觉得有一些简单的CSS修复，但我似乎无法弄明白。目标是下图。任何帮助将不胜感激。

Answer 1

您需要清除行并重置并在不同的断点处再次应用这些清除。

clearing-bootstrap-3-columns

Answer 2

在您的情况下，您需要做的就是在md屏幕上的每个第2项之后以及sm屏幕上的每第3项之后清除行。

像这样：

  <div ng-repeat="activity in activities">

    <!-- your item -->
    <div class="col-sm-6 col-md-4">
      <img ng-src="[[ act.icon ]]" height="100" alt="">
      <h3>[[ act.title ]]</h3>
      <a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
      <p>[[ act.description ]]<br>
        Duration: [[ activity.num_times ]] time<br>
        Points: [[ activity.points ]]<br>
      </p>
    </div>

    <!-- clear row after every 3rd item on MD screens -->
    <div class="clearfix visible-md" ng-if="($index+1) % 3 === 0"></div> 

    <!-- clear row after every 2nd item on SM screens -->
    <div class="clearfix visible-sm" ng-if="($index+1) % 2 === 0"></div> 
  </div>

这是plunker for demo