Angularjs在響應式視圖中定製ng-repeat瓷磚

Question

所以我有這些使用ng-repeat創建的「瓷磚」，如下面的代碼所示。這部分工作正常，這個問題是更真實的爲什麼我不能讓<ul>集中在平板電腦和手機的小視圖中，就像我可以在整個視圖中一樣。我也使用Bootstrap 3.x。已經嘗試過騎乘，但似乎沒有中心這些瓷磚。還會在不同的移動視圖下方顯示圖片，然後顯示完整視圖，然後顯示我的代碼。

在平板電腦上，它應該顯示2居中。它確實表明2，但他們左對齊爲：

然後在手機，應該是1集中，但同樣，左對齊如：

而現在，上衆目睽睽之下，你可以看到他們是如何在父容器內的中心：

我的代碼（HTML）：

<div class="beneArea"> 
    <div class="beneHeading" style="padding-top: 30px;"> 
     <h1>My Benefit Statements</h1> 
     <p>Click on a benefit tile to access more detailed information.</p> 
    </div> 
    <div class="beneArea col-md-12"> 
     <ul class="col-md-3" data-ng-repeat="benefit in ppt.Benefits" > 
      <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==false && benefit.isOE==false && (benefit.benefit == 'HealthCare' || benefit.benefit == 'Health Care' || benefit.benefit == 'Limited')" > 
       <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}"> 
        <card template1 ng-model="benefit"></card> 
       </a> 
      </div> 
      <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==true && benefit.isOE==true && (benefit.benefit == 'HealthCare' || benefit.benefit == 'Health Care' || benefit.benefit == 'Limited')" > 
       <card template1b ng-model="benefit"></card> 
      </div> 
      <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==true && benefit.isOE==false && (benefit.benefit == 'HealthCare' || benefit.benefit == 'Health Care' || benefit.benefit == 'Limited')" > 
       <card template1c ng-model="benefit"></card> 
      </div> 
      <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==false && benefit.isOE==false && benefit.benefit == 'DayCare'" > 
       <a style="text-decoration: none" href="#/statement?pid={{benefit.planId}}&bid={{benefit.benefitTypeId}}"> 
       <card template1d ng-model="benefit"></card> 
       </a> 
      </div> 
      <div class="beneTile" ng-if="benefit.planTypeId==1 && benefit.isPending==true && benefit.isOE==false && benefit.benefit == 'DayCare'" > 
       <card template1c ng-model="benefit"></card> 
      </div> 
     </ul> 
    </div> 
</div> 

還有一些CSS創建和管理這些：

.beneArea { 
    clear: both; 
    padding-left: 0; 
    padding-right: 0; 
} 

.beneHeading { 
    color: #000000; 
    text-align: center; 
} 

.beneHeading h1 { 
    color: #000000; 
} 

.beneHeading > p { 
    padding-bottom: 30px; 
} 

.beneArea { 
    padding-bottom: 60px; 
} 

.beneArea > ul { 
    margin-top: 15px; 
    height: 285px; 
    width: 285px; 
    float: left; 
} 

.beneTile { 
    max-height: 285px; 
    max-width: 285; 
    border: 1px solid #999999; 
} 

@media only screen and (max-width: 767px) { 
    ul > .beneTile { 
     max-height: 285px; 
     max-width: 285px; 
    } 
} 

@media only screen and (max-width: 500px) { 
    div.beneArea > ul { 
     max-height: 285px; 
     max-width: 100%; 
    } 
} 

.beneTile:hover { 
    cursor: pointer; 
} 

什麼我可以做任何想法解決這一問題？已嘗試應用保證金左側和保證金右側自動以及文本對齊：中心到<ul>沒有運氣，以及其他一些事情。任何輸入都會很棒！非常感謝。

Answer 1

Dan在這裏講述了一個很好的觀點，關於你如何佈置代碼的方法。
看看FIDDLE here我放在一起來幫助顯示你可以在這裏做什麼，以移動視圖爲中心。

這是一個有點使用ng-repeat這個演示。

你會看到我使用媒體中斷點，並有css控件centerThis類。

我用下面的CSS來做到這一點。
使用：變換：translate（-50％）;

@media(max-width:768px) { 
    .centerThis{ 
     left: 50%; 
     transform: translate(-50%); 
    } 
} 

與NG-重複的HTML會是這樣......

<div class="container" ng-app='myApp' ng-controller='DemoController'> 
    <div class="row-fluid"> 
      <div class="col-sm-12 col-xs-6 border-xs centerThis"> 
       <div class="col-sm-4 col-xs-8 block-1 centerThis" ng-repeat='block in blocks'></div> 
      </div> 
     </div> 
</div> 

您將看到您的代碼中有我沒有使用UL。

我希望這個小小的演示可以幫助你回到正軌。