基於磁貼的列表

我正在製作一個web應用程序，該應用程序應該列出從json收集的基於磁貼列表（有點像購物商店）中的對象，其中每個瓷磚都是div。在Bootstrap中做這件事的最好方法是什麼？我使用的是Angular，我想在ng-repeat指令的幫助下完成。如果div的數量超過查看區域，則會出現滾動條。基於磁貼的列表

This is graphical view, how I want it to look like.

究竟是怎樣實現的最佳途徑？在此先感謝。

來源

2015-04-08 visst

<div class=container> 
    <div class="row"> 
     <div class="col-sm-4" ng-repeat="tile in tiles"> 
      <div class="panel panel-default"> 
       <div class="panel-header"> 
       {{tile.header}} 
       </div> 
       <div class="panel-body"> 
       {{tile.body}} 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

可能是這樣的嗎？我使用col-sm-4，這樣3個瓷磚可以連續看到。當屏幕變得更小，然後700的東西，它將被放在彼此相反。

來源

2015-04-08 10:23:06 petur

使用bootstraps網格系統。將所有的div放在.row類的容器中，並用.col-sm-4將012-和overflow: auto添加到容器中，以便滾動。

來源

2015-04-08 10:23:54 kvetis

您可以使用常規的bootstrap grid system

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
</div>

頁面的寬度是12個單位，所以寬度4格會給你3列。如果您不斷添加總寬度超過12的div，它將被放置在不同的行中。

在我給你的例子中，你應該得到2行，每行3個元素。

來源

2015-04-08 10:24:02

基於磁貼的列表

回答

相關問題