html - 将元素对齐到上一行的底部

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 个。我遇到的问题是并非所有行都显示所需的事件数。我的意思可以在下图中看到。

这与以下事实有关，即某些 Activity 的文本比其他 Activity 多，因此它们的高度更高。下面的行将在尽可能高的位置插入下一个事件，通常会弄乱格式。

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

Answer 1

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

clearing-bootstrap-3-columns