css 需要制作响应卡，4张在桌面上显示，2张在移动的上显示

pu3pd22g 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(115)

我正在创建一个网站，我在网页设计初学者，我想创建一个类别的设计显示4卡在桌面和2卡在移动的视图。
我的代码如下

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="categories-main">
  <div class="container bg-light rounded">
    <br>
    <div class="h4 font-weight-bold text-center py-2">Categories</div>
    <br>
    <div class="row">
      <div class="col-lg-3 col-md-6 my-lg-2 my-2">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="#" alt=""> </div>
            <div class="d-flex flex-column"> <b>Public Speech</b>
              <a href="#">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br> Categories
  <br>

我尝试了很多改变，但没有得到我想要的。我希望从开发人员在这方面的帮助。

css

来源：https://stackoverflow.com/questions/74457279/need-to-make-responsive-card-4-to-be-showed-on-desktop-and-2-in-mobile

2条答案

按热度按时间

tpgth1q71#

参考引导程序文档，最大列数为12。因此，您需要为移动的设置col-6（将设置2列（12/2 = 6）），为桌面设置col-3 col-3 col-3（将设置4列（12/4 = 3））。
请参见下面的简化示例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <div class="row">
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-red">
           1
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-blue">
           2
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-green">
           3
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-black">
           4
        </div>
      </div>
    </div>

赞(0）回复(0）举报 2022-11-19

nkoocmlb2#

默认情况下有12列。
你可以这样写<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">

12/3 = 4 in a row when screen is xl
12/4 = 3 in a row when screen is lg
12/6 = 2 in a row when screen is md
12/12= 1 in a row when screen is sm

您可以根据需要根据设备自定义列。：）

赞(0）回复(0）举报 2022-11-19

我来回答

css 需要制作响应卡，4张在桌面上显示，2张在移动的上显示

2条答案

相关问题

热门标签

最新问答