响应式设计 - 在小屏幕上每行显示 2 张卡片

Question

我正在开发一个网页，其中有一排卡片，每张卡片都包含一个图像和一个标题。目前，我正在使用 Bootstrap 网格系统在大屏幕上每行显示 4 张卡片 (col-md-2)，我想调整它以在小屏幕上每行显示 2 张卡片。

<div class="row">
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                        <img src="~/img/deprt-8.png" style="max-width: 100%; ">

                        <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
                    </div>
                </div>
            <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-10.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Pulmonology </h5>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-11.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Gastroenterology</h5>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 item mt-3">
                    <div class="card item-card card-block">
                    <img src="~/img/deprt-1.png" style="max-width: 100%; ">
                        <h5 class="item-card-title my-2">Dentistry</h5>
                    </div>
                </div>
            
            </div>

Answer 1

将

col-sm-4

替换为

col-sm-6

，以在小屏幕上显示 2 卡，在更小的屏幕上显示 1 卡。或者将

col-sm-4

替换为

col-6

，以在小屏幕和最小屏幕上显示 2 卡片。

将

col-md-2

更改为

col-md-3

以在较大屏幕上每行显示 4 卡，而不是 6。

可选：

从

style="max-width: 100%; "

中删除不必要的

<img>

，并确保将

.row

放入容器类（例如

.container-fluid

）以避免父元素溢出（除非有其他样式影响图像和行容器布局） .

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Pulmonology </h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Gastroenterology</h5>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 item mt-3">
      <div class="card item-card card-block">
        <img src="https://placehold.co/600x400">
        <h5 class="item-card-title my-2">Dentistry</h5>
      </div>
    </div>
  </div>
</div>