Question

我正在尝试为我的应用创建响应式视图。

这里的问题是我需要显示的元素数是动态的。

例如

在我的桌面上，我想要

<div class="row">
    <div class="col-xs-3 col-md-10" ng-repeat="product in products">{{product.name}}  
    </div>
</div>

假设我有13种产品。在桌面上，我想要

product 1 
product 2
product 3
product 4
product 5
product 6
product 7
product 8
product 9
product 10
product 11
product 12
product 13

在手机中，我需要

product 1 product 2 product 3 product 4 product 5 product 6 …etc

带滚动条。

产品数量为＆＃39; Dynamic＆＃39;。我不知道如何用bootstrap做到这一点。任何人都可以帮我吗？非常感谢！

Answer 1

为它们分配所有相同的class="col-sm-12"，它们将堆叠在桌面上，并在移动设备上有一个滚动条（从上到下查看）。如果你想在水平握住手机时左右滚动，那就是另一个问题。

Answer 2

您还可以将它们转换为列表，并使用jQuery将它们设置为特定视口大小的inline。

HTML：

<div class="container">
   <ul class="items">
      <li>product 1</li>
      <li>product 2</li>
      <li>product 3</li>
      <li>product 4</li>
      <li>product 5</li>
      <li>product 6</li>
      <li>product 7</li>
      <li>product 8</li>
      <li>product 9</li>
      <li>product 10</li>
      <li>product 11</li>
      <li>product 12</li>
      <li>product 13</li>  
   </ul>
</div>

JS：

  $(window).on('resize', function() {
    if($(window).width() > 768) {
        $('li').removeClass('inline');
    }else{
       $('li').addClass('inline');
    }
});

示例：CodePen Demo

在我的例子中如何使用bootstrap显示我的元素

2 个答案: