我正在尋找正確的模式以每3列注入一個引導行類。我需要這個是因為cols沒有固定的高度（而且我不想固定一個），所以這破壞了我的設(shè)計！這是我的代碼：<div ng-repeat="product in products"> <div ng-if="$index % 3 == 0" class="row"> <div class="col-sm-4" > ... </div> </div></div>但它每行只顯示一個產(chǎn)品。我想要的最終結(jié)果是：<div class="row"> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div></div><div class="row"> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div></div>我可以僅使用ng-repeat模式（沒有指令或控制器）來實現(xiàn)嗎？該文檔介紹了ng-repeat-start和ng-repeat-end，但是我無法弄清楚在此用例中如何使用它！我覺得這是我們在引導模板中經(jīng)常使用的東西??？謝謝
4 回答
神不在的星期二
TA貢獻1963條經(jīng)驗 獲得超6個贊
投票最多的答案雖然有效，但不是我認為是有角度的方法，也不是使用bootstrap自己的類來處理這種情況。正如@claies所提到的，.clearfix該類適用于此類情況。我認為，最干凈的實現(xiàn)如下：
<div class="row">
<div ng-repeat="product in products">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
</div>
此結(jié)構(gòu)避免了product數(shù)組的混亂索引，允許使用干凈的點表示法，并且將clearfix類用于其預(yù)期目的。
慕尼黑的夜晚無繁華
TA貢獻1864條經(jīng)驗 獲得超6個贊
我知道有些晚了，但仍然可以幫助某人。我這樣做是這樣的：
<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-4">{{products[$index]}}</div>
<div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
<div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
</div>
侃侃無極
TA貢獻2051條經(jīng)驗 獲得超10個贊
好了，該解決方案遠遠比那些簡單的已經(jīng)在這里，并允許不同的設(shè)備寬度不同的列寬。
<div class="row">
<div ng-repeat="image in images">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
... your content here ...
</div>
<div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>
<div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>
<div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>
<div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>
</div>
</div>
注意，該% 6部分應(yīng)該等于結(jié)果列數(shù)。因此，如果在column元素上有類col-lg-2，則將有6列，請使用... % 6。
該技術(shù)（不包括ng-if）
MMMHUHU
TA貢獻1834條經(jīng)驗 獲得超8個贊
盡管您想要完成的工作可能有用，但還有另一種選擇，我認為您可能會忽略它，它要簡單得多。
沒錯，當列的高度不固定時，Bootstrap表的行為會很奇怪。但是，創(chuàng)建了一個引導類來解決此問題并執(zhí)行響應(yīng)式重置。
只需<div class="clearfix"></div>在每個新行的開頭之前創(chuàng)建一個空白，以使浮點數(shù)重置，并使列返回其正確位置。
- 4 回答
- 0 關(guān)注
- 818 瀏覽
添加回答
舉報
0/150
提交
取消