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。

Answer 2

<div class="row">
    <div class="col-lg-2 col-md-4 col-xs-6"></div>
    <div class="col-lg-2 col-md-4 col-xs-6"></div>
    <div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
</div>
<div class="row">
    <div class="hidden-lg col-md-4 col-xs-4"></div>
    <div class="hidden-lg col-md-4 col-xs-4"></div>
    <div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div>
</div>
<div class="row">
    <div class="hidden-lg hidden-md col-xs-4"></div>
    <div class="hidden-lg hidden-md col-xs-4"></div>
</div>

Answer 3

<div class="row">
<div class="col-lg-6 visible-lg">Column 6 Large</div>
<div class="col-md-3 visible-md">Column 1 Medium</div>
<div class="col-md-3 visible-md">Column 2 Medium</div>
<div class="col-xs-2 visible-xs">Column 1 Small</div>
<div class="col-xs-2 visible-xs">Column 2 Small</div>
<div class="col-xs-2 visible-xs">Column 3 Small</div>
</row>

应该注意的是，在像这样的单独列中具有重复内容对于SEO来说并不是很好。您可能希望通过使用嵌套列来更精细地控制内容，而不必复制它。

根据屏幕大小更改列数

3 个答案: