html - 如何让这些 Bootstrap 列 div 在井内的长度一致？

Question

我正在使用 Bootstrap/Angular 做一件事情，我正在使用 ng-repeat 从从数据库检索的数组中填充 div。我的问题是，虽然 div 本身需要将 word-wrap 设置为 auto，但这会导致它们的高度因内容而异。

我每个孔显示三个 div，那么如何根据最高的那个使所有三个 div 高度一致？

这是 html:

<div class="well tickets" ng-repeat="tickets in chunkedTickets">
   <div class="col-sm-4 task clearfix" ng-repeat="ticket in tickets">`

        <form name="editForm" class="editForm">
           <h4 ng-show="!ticket.edit">{{ticket.name}}</h4>
           <h4 ng-show="ticket.edit">Ticket Name:</h4>
          <!-- more stuff -->

  </div>
</div>

chunkedTickets 是分块成嵌套三元组的数据数组。这是应用于水井和“任务”div 的 CSS:

.tickets {
  overflow: auto;
 }

.task {
  word-wrap: break-word;
  background-color: #fbfbfb;
  border-radius: 4px;
  border: solid 1px #aaaaaa;
  border-left: -5px;
  border-right: -5px;
};

well 和 clearfix 类当然是 Bootstrap 。我尝试过 flexboxes，尝试将高度设置为 90%，什么都试过了。我在这方面一直很糟糕，并且在搜索时找不到任何帮助，因为问题与 Bootstrap 的 .row 类有关，我需要专门使用 .well。如果能提供一些帮助，我将不胜感激。

现在应用程序的屏幕截图:http://i.imgur.com/70F34tM.png

Answer 1

我通常使用这个解决方案:

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

它非常健壮，只需为行和所需的列添加类(我通常使用 row-md-height 和 col-md-height，对于智能手机通常不需要。