Question

我试图让连续的面板无论内容如何都具有相同的高度。我使用基本的bootstrap示例就可以正常工作，如this example。

然而，当我使用 angularjs 来创建带有来自控制器的数据的内容时，使用ng-repeat和ng-controller，这完全搞定了，结果看起来很糟糕，在firefox和谷歌chrome中有完全不同的结果。

由于某种原因使用ng-controller和ng-repeat的div增加了内容的宽度，因此它们不是彼此相邻的3个面板，而是放在彼此之下（在firefox中它的相反效果）当它应该是400时，div变为40px宽。在检查chrome中的结果时，div有另一个指令＆＃34; ng-scope＆＃34;，我认为这是添加宽度的。列也似乎没有相同的高度。当我从div中删除指令并手动插入内容时，它工作正常。

有没有人知道如何使用角度来制作flexbox，或者是否有其他方法可以使列具有相同的高度而不管内容如何？

查看：

<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"}

              ]
      })

})();

Answer 1

Angular在一个div中包含col-md-4列，它们将它们一个堆叠在另一个之上。要删除它，您应该将此类添加到ng-repeat div：

<div class="col-md-4" ng-controller="AktivitetController" ng-repeat="aktivitet in aktiviteter | orderBy: '-navn'">
    <!-- REMOVE THIS AND ADD THIS CLASS TO PARENT -->
    <!-- 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>
    <!-- REMOVE THIS -->
    <!--</div>-->
</div>

使用flexbox用于不使用angularjs的相同高度的bootstrap列

1 个答案: