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

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

我正在使用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行以上。我遇到的问题是,并非所有行都显示所需的活动数。我的意思是可以在下图中看到。

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

这与以下事实有关:某些活动比其他活动具有更多的文字,因此它们的高度更高。下面的行将在可能的最高位置插入下一个活动,通常会弄乱格式。

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

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

最佳答案

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

clearing-bootstrap-3-columns

关于html - 将元素与上一行的底部对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32642394/

10-10 14:22