根据屏幕大小更改列数答案

【问题标题】：Change number of columns depending on screen size根据屏幕大小更改列数
【发布时间】：2014-11-02 08:53:56
【问题描述】：

我正在尝试使用 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？

【问题讨论】：

您的要求不清楚。您要在所有屏幕尺寸上显示相同的 7 个字段吗？请记住：“移动优先”是响应式设计的基本原则。请在xs 上显示您想要的数据。

标签： javascript css ruby-on-rails twitter-bootstrap

【解决方案1】：

<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 不利。您可能希望通过使用嵌套列来更精细地控制您的内容，而无需复制它。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：