如何针对不同的显示尺寸更改行中的列数 [英] How to change number of columns in a row for different display sizes

问题描述

我有产品清单:

<div class="col-md-4">Item1</div><div class="col-md-4">Item2</div><div class="col-md-4">Item3</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>

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

解决方案

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

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

以上为较大视口提供了 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="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>

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

项目 1 |第 2 项第 3 项 |第 4 项第 5 项 |第 6 项

I have list of products:

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

How can I change it so for smaller displays (sm,xs) I'll have 2 items per row, and for larger (lg) 4 item per row ?

解决方案

You can simply add more classes according to the viewport width:

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

The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.

Since a row can be comprised of 12 columns, assigning the value 6 appended to the class that corresponds to the breakpoint you want will give each column 50% of the row width.

To quote BootStrap directly:

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

• Extra small devices Phones = col-xs-n
• Small devices Tablets = col-sm-n
• Medium devices Desktops = col-md-n
• Large devices Desktops = col-lg-n

EDIT - as per OP's comment if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:

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

This will give you the following output at smaller viewports

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

这篇关于如何针对不同的显示尺寸更改行中的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！