如何将列表显示为lg屏幕的3列和sm屏幕的1列

要将列表显示为lg屏幕的3列和sm屏幕的1列，可以使用响应式设计和CSS框架来实现。以下是一个可能的解决方案：

使用响应式设计：响应式设计是一种根据不同屏幕尺寸和设备自适应地调整网页布局和样式的技术。通过使用媒体查询，可以根据屏幕宽度的不同设置不同的样式。
使用CSS框架：CSS框架如Bootstrap、Foundation等提供了响应式的栅格系统，可以方便地创建不同屏幕尺寸下的网格布局。这些框架提供了预定义的类来设置列数和间距，简化了布局的工作。

以下是一个使用Bootstrap框架的示例：

<!DOCTYPE html>
<html>
<head>
  <title>列表布局示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .item {
      margin-bottom: 20px;
      background-color: #f5f5f5;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-12">
        <div class="item">
          <!-- 第一列内容 -->
        </div>
      </div>
      <div class="col-lg-4 col-sm-12">
        <div class="item">
          <!-- 第二列内容 -->
        </div>
      </div>
      <div class="col-lg-4 col-sm-12">
        <div class="item">
          <!-- 第三列内容 -->
        </div>
      </div>
    </div>
  </div>
</body>
</html>

在上面的示例中，通过设置col-lg-4和col-sm-12类来实现在lg屏幕下显示为3列，而在sm屏幕下显示为1列。列表项的内容可以放置在item类的<div>元素中。

推荐的腾讯云相关产品：腾讯云基于Kubernetes的容器服务（TKE），它可以通过自动伸缩和负载均衡来管理容器集群，适用于部署和运行容器化应用。详情请参考腾讯云容器服务产品介绍：https://cloud.tencent.com/product/tke

请注意，以上答案仅供参考，具体的解决方案可能因实际情况和需求的不同而有所调整。

如何将列表显示为lg屏幕的3列和sm屏幕的1列

、、、

在计算机上，我的列表如下所示： ? 但在手机上，它只显示第一列，而不是以一列列表的形式继续列表。我正在使用Bootstrap，我的代码看起来像这样： <section> <div class="row align-items-start"> <div class=&

浏览 6提问于2020-01-27得票数 0

回答已采纳

3回答

如何在WordPress中将不同的菜单添加到引导主题的移动版本中？

、、

我有一个桌面和平板电脑的主菜单，但当用户到达移动视图时，我希望该菜单中的链接发生变化。不太确定从哪里开始。以下是我在header.php文件中为桌面版本的Bootstrap菜单所做的工作：<div class="navbar-header"> <button

浏览 4提问于2014-06-17得票数 4

回答已采纳

2回答

更换旋转木马柱？

、、

我有一个带有3列的引导旋转木马，但我希望它在中等屏幕上为2列，对于小屏幕为1列。我怎样才能做到这一点？ <Row style={{ width: "80%", margin: "auto" }}> <Col sm</Col

浏览 3提问于2018-05-30得票数 0

回答已采纳

1回答

汉堡包菜单显示在桌面设备上

、、

我有一个简单的导航条使用引导4和BEM方法，当我运行我的应用程序汉堡包菜单显示在桌面设备，而不是隐藏。下面是到jsfiddle的链接： <nav class="main-nav"> <li class="} list-style-type: none;

浏览 2提问于2018-08-11得票数 0

回答已采纳

1回答

引导网格动态定位/转换元素

、、

当您到达选定的width: 100%的min-width时，您可以将最后一个元素移动到新的行中并更新原始行中元素的宽度，而不是将所有元素转换为col-*吗？出发地：不好：现在，当我在这个内容的左边和右边有项目时，我遇到了问题。宽度应该是静态的，现在更改窗口的大小会

浏览 2提问于2014-08-25得票数 0

2回答

如何在Twitter引导中隐藏/显示响应站点的DIVs

、

我是第一次在引导的响应网站上工作，我无法解码类，如hidden-sm或visible-md等。 hidden-sm的意思是隐藏特定的DIV吗？

浏览 14提问于2015-10-16得票数 1

回答已采纳

3回答

引导中列类型之间的差异

我真的对引导中的专栏感到困惑。我学习引导，但无法识别列类型之间的不同。.col-md-4 .col-sm-4 .col-sm-offset-2 我明白这些数字是什么意思。我明白12栏的意思，但是md，xs之间有什么不同.如果你能告诉我这方面的细节，我会很高兴的。

浏览 4提问于2015-05-31得票数 1

回答已采纳

1回答

引导列:将中间列放在移动设备上的单独行上

、、、

我有一个问题，列在引导，我没有找到如何解决我的问题。在移动平台上：对于下面的行和列，有人知道怎么做？<div class="container"> 1 <div class="col-6">2 <div class=&qu

浏览 4提问于2020-08-29得票数 0

回答已采纳

1回答

导航栏-切换显示不同的水平溢出视图

、、

我想要切换它，甚至当我点击菜单项的时候。因此，我也将data-toggle="collapse" data-target="#navbar_collapse"添加到菜单列表项中。现在移动视图，工作如我所预期的。但在桌面视图中，当我单击菜单项时，会显示一些异常的水平溢出。请参阅

浏览 1提问于2016-06-14得票数 0

1回答

我如何使引导5网格响应智能手机？

、、

我的投资组合中有一个项目部分。我在左边的描述/右边的图像之间切换到左边的图像/右边的描述。我一直在努力使这一问题得到响应，但我想不出如何解决这一问题。TinDog-WebDevBootcamp" role="button" target="_blank">Github Repo</a> </div> <div class="c

浏览 13提问于2022-02-06得票数 0

2回答

引导程序基础

、、

问题1:我如何知道某个设备对另一个device.Example的等效类前缀: col-md-6它的等价物是什么?如果我想向较小的设备展示它，那么col-sm-X或col-xs-X会是什么？我很困惑，为什么他把col 10放在960网格中只需要6列的商店横幅中，为什么不是col 6呢？请参阅附件中的图像。 <div class="row&

浏览 1提问于2016-07-02得票数 0

3回答

引导4-在xs和sm上隐藏不工作

、

我正在为我的应用程序创建xs视图，我的问题是，当我想在小型和超小型设备上隐藏一个div时--这个额外的小设备不起作用--我跟踪了引导4文档，我不知道为什么这不起作用。<div class="headers"> <div class="col-lg-6 col-md-4 col-sm-5">Produkt<div cl

浏览 0提问于2018-03-26得票数 10

回答已采纳

2回答

如何在引导带中只为较小的屏幕大小设置推拉列

、、

"col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div> <div class="col-lg-3 col-md-3 col-sm-6 col-sm-pullcol-sm-pull-*和col-sm-push-*。不过，推拉列是在中屏幕和大屏幕中调用<em

浏览 2提问于2014-07-14得票数 1

回答已采纳

1回答