根据屏幕尺寸更改列数 [英] Change number of columns depending on screen size

问题描述

我正在尝试使用Bootstrap，我想知道如何根据屏幕尺寸调整列数.我从Bootstrap CSS教程中看到了这一点:

I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:

<!-- 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?

I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?

推荐答案

是的，您可以使用Bootstrap更改列数.这就是柔性网格的用途.

Yes, you can change number of columns with Bootstrap. That's what flexible grid is for.

这是一个按照您的说明进行操作的示例:

Here's an example that follows your instructions:

<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>

请参见 引导演示 .

这篇关于根据屏幕尺寸更改列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！