如何在本例中使用bootstrap显示元素
如何在本例中使用bootstrap显示元素
提问于 2015-02-26 03:02:50
我正在尝试为我的应用程序创建一个响应式视图。
这里的问题是我需要显示的元素数是动态的。
例如
在我的桌面上，我想
<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有一个滚动条。
产品的编号是'Dynamic‘。我不确定如何使用bootstrap来做到这一点。有谁能帮我一下吗？非常感谢!
回答 2
Stack Overflow用户
发布于 2015-02-26 03:18:02
给他们分配相同的class="col-sm-12"，他们将堆叠在桌面上，并在移动设备上有一个滚动条(从上到下查看)。如果你想在手机水平拿着的时候左右滚动，那就是另一个问题了。
Stack Overflow用户
发布于 2015-10-25 04:04:29
也可以将它们转换为列表，然后使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28727468
复制相关文章
相似问题
腾讯云开发者
