我正在试验 Bootstrap,我想知道如何根据屏幕尺寸调整列数。我从 Bootstrap CSS 教程中看到了这个:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
我在大屏幕上有 6 列,我想在中等屏幕上将其切换为两行 3 列,在小屏幕上切换为三行 2 列。在我看来,我只能更改列宽而不是列数。我可以用 Bootstrap 来做吗?如果不能,那最好的方法是什么? Javascript?
最佳答案
是的,您可以使用 Bootstrap 更改列数。这就是灵活网格的用途。
这是一个遵循您的说明的示例:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2">first</div>
<div class="col-xs-6 col-md-4 col-lg-2">second</div>
<div class="col-xs-6 col-md-4 col-lg-2">third</div>
<div class="col-xs-6 col-md-4 col-lg-2">fourth</div>
<div class="col-xs-6 col-md-4 col-lg-2">fifth</div>
<div class="col-xs-6 col-md-4 col-lg-2">sixth</div>
</div>
参见 Bootply Demo .
关于javascript - 根据屏幕大小更改列数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25736084/