顯示12條，每行與引導，其餘應到下一行

我試圖在引導網格顯示一個動態的用戶數：顯示12條，每行與引導，其餘應到下一行

<div class="row"> 
    <div ng-repeat="Contact in Contacts" class="col-md-{{12/Contacts.Count}}"> 
     <img ng-src="../../Images/{{Contact.ContactImage}}.png" alt="{{Contacts.Name}}" /> 
     <h4 class="subtitle">{{Contacts.FullName}}</h4> 
    </div> 
</div>

上述工作的同時，有小於12聯繫人。但如果還有更多，我希望他們去下一行。有沒有辦法做到這一點？

來源

2016-02-13 ElenaDBA

你能舉個例子還是在codepen中。我認爲你正在做的事很有可能，但是我想給你一個準確的答案。 –

正如你必須明白，引導規模達12列。因此，爲了在一行中包含12列，您需要將行分成12個相同大小的列。而col-md-1就是這樣。此外，您還可以根據您的視口要求使用col-sm-1 col-xs-1。你的代碼更改爲： <div ng-repeat="Contact in Contacts" class="col-md-1">

您可以跳過此class="col-md-{{12/Contacts.Count}}"，因爲你已經知道你12列要求。如果您的Contacts.Count爲5，那麼在這種情況下，12/5 = 2.4，並且在引導程序中沒有像col-md-2.4這樣的類。

來源

2016-02-13 06:26:21

默認情況下，引導程序的網格系統自動將溢出列封裝到下一行，因此您在技術上不需要更改當前的代碼。例如...

<div class="row"> 
    <div class="col-md-6">I'm in the first row</div> 
    <div class="col-md-6">I'm in the first row</div> 
    <div class="col-md-6">I'm in the second row!!!!!!</div> 
</div>

如果您確實希望使用一個單獨的div一行每組12列;這也很容易實現。只要創建兩個循環，像這樣：

var contacts = [{...}, {...}, ...]; // assume this is an array of 20 objects 

for (var i = 0, n = Math.ceil(contacts.length/12); i < n; i++) { 
    // print <div class="row"> here 
    for (var j = i*12; j < Math.min(i*12+12, contacts.length); j++) { 
     console.log('row', i, 'col', j); 
     // print <div class="col-md-1">contacts[j].RANDOM_DATA</div> here 
    } 
    // print </div> here 
}

這裏是一個超級基本/快小提琴證明：https://jsfiddle.net/67L1h1v5/

來源

2016-02-13 04:47:32 michael

邁克爾，沒有ng-repreat它只顯示一個項目 – ElenaDBA

您是否使用Bootstrap的某種變體或額外的庫？ Pure Bootstrap不需要'ng-repreat'類。這聽起來像你可能使用的AngularJS，我不熟悉，並沒有在OP中提到。 – michael

邁克爾，爲什麼downvote？ – ElenaDBA

顯示12條，每行與引導，其餘應到下一行

回答

相關問題