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

发布时间：2020-12-17 21:33:07 所属栏目：安全来源：网络整理

导读：我有产品清单： div class="row" div class="col-md-4"Item1/div div class="col-md-4"Item2/div div class="col-md-4"Item3/div/divdiv class="row" div class="col-md-4"Item4/div div class="col-md-4"Item5/div div class="col-md-4"Item6/div/div 如何

我有产品清单：

<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个项目？

解决方法

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

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

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

>超小型设备电话= col-xs-n
>小型设备平板电脑= col-sm-n
>中型设备Desktops = col-md-n
>大型设备Desktops = 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!