javascript - 根据屏幕大小更改列数

Question

我正在试验 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？

Answer 1

是的，您可以使用 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 .