twitter-bootstrap - 如何为不同的显示尺寸更改一行中的列数

Question

我有产品 list :

<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

您可以根据视口(viewport)宽度简单地添加更多类:

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

以上为较大的视口(viewport)提供了 4 列的输出，3 列用于中，2 列用于较小。

由于一行可以由 12 列组成，因此赋值 6附加到与您想要的断点对应的类将为每列提供 50% 的行宽。

直接引用 BootStrap:

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)

超小型设备 电话 = col-xs-n

小型设备 平板电脑 = col-sm-n

中型设备 台式机 = col-md-n

大型设备台式机 = col-lg-n

编辑 - 根据 OP 的评论，如果您希望在较小的视口(viewport)中并排放置 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>

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

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