如何在桌面上显示一排六列，在移动端显示两排三列？

Posted 2023-03-21

【中文标题】如何在桌面上显示一排六列，在移动端显示两排三列？

【英文标题】：How to display one row of six columns on desktop and two rows of three columns on mobile?

【发布时间】：2020-10-11 12:37:30

【问题描述】：

我有一个包含 6 张图片的部分。我想在桌面上以单行 6 列的形式显示它们，然后在移动设备上以 2 行 3 列的形式显示它们。

我能够在桌面上实现所需的布局。但是在移动设备上，这些图像在单个列中彼此堆叠在一起。我希望它们出现在 2 行中，每行 3 列。

这是标记：

<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

</div>

【问题讨论】：

如果您已经制作了任何 CSS，请与我们分享或只是检查所需输出的新 CSS 的答案

尝试阅读文档getbootstrap.com/docs/4.0/layout/grid

【参考方案1】：

从类名中删除“-sm”，因为这针对 ≥576px 的屏幕。 Bootstrap 4 首先是移动设备，因此您只需将“col-4”用于https://getbootstrap.com/docs/4.0/layout/grid/

的文档中所述

<div class="row">

  <div class="col-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-4 col-lg-2">
    <img src="" >
  </div>

</div>

【参考方案2】：

如果以下是您的 html，请尝试为所需的输出添加给定的 CSS -

CSS 和 HTML-

.row 
  width: 100%;


.row img 
  height: 100px;
  width: auto;


.col-sm-4 
  height: 100px;


.col-sm-4:nth-child(1) 
  background: #999;


.col-sm-4:nth-child(2) 
  background: #888;


.col-sm-4:nth-child(3) 
  background: #777;


.col-sm-4:nth-child(4) 
  background: #555;


.col-sm-4:nth-child(5) 
  background: #333;


.col-sm-4:nth-child(6) 
  background: #111;


@media only screen and (max-width: 767px) 
  .col-sm-4 
    float: left;
    width: 33.3%;
  


@media only screen and (min-width: 768px) 
  .col-lg-2 
    float: left;
    width: 16.6%;
  

<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" >
  </div>

</div>

请调整浏览器窗口大小以查看结果。

【讨论】：

如果您需要任何帮助，请告诉我，如果您认为我能够解决您的问题，请接受我的回答。

这是错误的解决方案。答案是遵循引导文档，不要创建不需要的自定义代码或覆盖引导核心代码getbootstrap.com/docs/4.0/layout/grid

你不应该重写 Bootstrap 的网格 CSS ......他只需要使用 col-4 类而不是 col-sm-4

他在他的问题中没有提到他正在使用引导程序，他只是想知道，他怎么能做到这一点，正因为如此，我给了他一个 CSS 的演示！我的意思是做这件事的概念，但如果他已经有一个引导解决方案，那么当然，另一个答案是有帮助的。

@Om_16 问题被标记为 Bootstrap