如何针对不同的显示大小更改行中的列数

Question

我有产品清单:

<div class="row">
  <div class="col-md-4">Item1</div>
  <div class="col-md-4">Item2</div>
  <div class="col-md-4">Item3</div>
</div>

<div class="row">
  <div class="col-md-4">Item4</div>
  <div class="col-md-4">Item5</div>
  <div class="col-md-4">Item6</div>
</div>

如何更改它以便对于较小的显示器(sm,xs)我每行将有2个项目,每行有更大的(lg)4个项目？

Answer 1

您可以根据视口宽度简单地添加更多类：

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

以上为较大视口提供了 4 列的输出，中型为 3 列，较小的为 2 列。

由于一行可以由 12 列组成，因此将6附加到与所需断点对​​应的类的值分配给每列 50% 的行宽。

直接引用 BootStrap：

超小型设备 手机 (<768px) 小型设备 平板电脑 (?768px) 中型设备 台式机 (?992px) 大型设备台式机 (?1200px)

• 超小设备电话=col-xs-n
• 小设备 平板电脑=col-sm-n
• 中型设备桌面=col-md-n
• 大型设备桌面=col-lg-n

编辑 - 根据 OP 的评论，如果您希望在较小的视口中并排显示 2 列，则需要将它们全部添加到同一行中：

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

这将在较小的视口中为您提供以下输出

Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6