【发布时间】：2015-11-30 08:41:09
【问题描述】：
无论内容如何，我都试图让面板连续具有相同的高度。我使用一个基本的引导示例让这个工作正常，如this example。
但是，当我使用 angularjs 使用来自控制器的数据创建内容时，使用 ng-repeat 和 ng-controller，这完全搞砸了，结果看起来很糟糕，在 Firefox 和 google chrome 中的结果完全不同。
由于某种原因，使用 ng-controller 和 ng-repeat 的 div 增加了内容的宽度，因此它们不是彼此相邻的 3 个面板，而是被放置在彼此下方（在 firefox 中是相反的效果，而 div当它应该是 400 时变成 40px 宽）。在 chrome 中检查结果时，div 有另一个指令“ng-scope”，我认为这是添加宽度的原因。这些列似乎也不像它们应该的那样具有相等的高度。当我从 div 中删除指令并手动插入内容时，它工作正常。
有谁知道如何使 flexbox 与 angular 一起工作，或者可能是另一种使列具有相同高度而不管内容如何？
查看：
<div class="row row-flex row-flex-wrap" id="aktivitetsmodul">
<div class="col-md-12">
<h2 class="page-header">
Aktiviteter
</h2>
</div>
<div ng-controller ="AktivitetController" ng-repeat="aktivitet in aktiviteter | orderBy: '-navn'">
<div class="col-md-4" >
<div class="panel panel-default flex-col ">
<div class="panel-heading"> <h4> <a href="#" >{{aktivitet.navn}} </a> </h4> </div>
<div class="panel-body flex-grow ">
<span class="pull-left"> <img src="assets/img/logo.jpg" style="padding:0.3em" width="70px"/></span>
<p> {{aktivitet.beskrivelse}}</p>
</div>
<div class="panel-footer">
<span> {{aktivitet.fra}} <i> til </i> {{aktivitet.til}} </span>
<span class="pull-right glyphicon glyphicon-trash" style="margin-left:10px"> </span>
<span class="pull-right glyphicon glyphicon-edit"> </span>
</div>
</div>
</div>
</div>
</div>
控制器
(function(){
angular.module("Aktivitet",["ui.bootstrap",])
.controller('AktivitetController', function($scope){
$scope.aktiviteter = [
{"navn":"Pitchfork Etsy", "beskrivelse":"Squid Shoreditch direct trade, single-origin coffee banh mi cardigan kitsch cliche vegan seitan cornhole ethical mumblecore","fra":"09-12-2015","til":"20-03-2016"},
{"navn":"Occupy DIY","beskrivelse": "Farm-to-table organic flannel Brooklyn locavore. Gastropub normcore bitters, brunch YOLO sriracha tote bag fashion axe ennui iPhone bespoke. ","fra":"10-10-2015","til":"24-12-2015"},
{"navn":"McSweeney's Intelligentsia", "beskrivelse":"Aesthetic narwhal beard, Portland McSweeney's ethical Brooklyn Tumblr Marfa drinking vinegar sartorial Williamsburg. ","fra":"10-10-2015","til":"24-12-2015"},
{"navn":"Keffiyeh normcore", "beskrivelse":"irony quinoa vegan. Health goth retro ennui, kogi forage Odd Future ugh selfies.","til":"05-07-2012","fra":"12-04-2015"},
{"navn":"Master cleanse vegan iPhone","beskrivelse": " DIY umami occupy literally pork belly Austin biodiesel cred. Kale chips wolf fingerstache, you probably haven't heard of them messenger bag distillery whatever..","til":"01-01-2016","fra":"24-12-2015"},
{"navn":"Blue Bottle Kickstarter organic", "beskrivelse":"disrupt lo-fi plaid craft beer banh mi. Keffiyeh pickled church-key bicycle rights selvage. Vinyl brunch Banksy, Williamsburg fap iPhone ethical gluten-free meh raw denim VHS American Apparel semiotics. ","til":"05-07-2012","fra":"12-04-2015"}
]
})
})();
【问题讨论】：
-
请向我们展示您迄今为止所做的工作，例如您的 JS、HTML 和 CSS。
-
帖子使用来自视图和控制器的代码进行了更新。该css与帖子中提供的链接完全相同。
标签： angularjs twitter-bootstrap flexbox