时间戳

首页 > 解决方案 > 如何使用引导程序 5 使我的网格项目（其中包含内容的框）响应？

grid - 如何使用引导程序 5 使我的网格项目（其中包含内容的框）响应？

问题描述

我正在一个网站上工作，该网站在其主体部分中有一个过滤器部分和一个产品列表。

我希望设置产品列表，就像在其主页上设置 YouTube 视频一样。当您更改大小时，框大小会相应更改，同时仍确保内容看起来整洁。

.filter{
    height: 300px;
    width: 200px; 
    background-color: pink;
}
.card{
    width: 300px;
    height: 370px;
    background-color: black;
}
  <div class="container-fluid">
      <div class="row">
          <div class="col-lg-3 col-md-3 col-xs-10">
              <div class="col-md">
                  <div class="filter"></div>
              </div>
          </div>
          <div class="col-lg-9 col-md-9 col-xs-10">
              <div class="row d-grid gap-3">
                  <div class="p-2 col-lg-4 col-md-4">
                      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"></div>
                  </div>
                  <div class="p-2 col-lg-4 col-md-4">
                      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"></div>
                  </div>
                  <div class="p-2 col-lg-4 col-md-4">
                      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"></div>
                  </div>
                  <div class="p-2 col-lg-4 col-md-4">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"></div>
                </div>
              </div>
          </div>
      </div>
  </div>

标签： gridresponsivebootstrap-5

解决方案

如果您需要所有框都具有与视口大小变化相同的宽度和高度，使用引导程序 5 实现此目的的一种方法是使用 .row-cols-{bp}-* 类，它允许为每个框指定首选列每个响应断点的行。

一个例子：见工作示例

在此示例中，对于响应式断点，可以有 1、2 或 4 列。

如果像 youtube 一样，您需要为每张卡片的宽度/高度保持固定的纵横比，则有 .ratio 系列类。

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4 row-cols-auto g-4">
  <div class="col">
    <div class="ratio ratio-4x3 card bg-primary"></div>
  </div>
  <div class="col">
    <div class="ratio ratio-4x3 card bg-secondary"></div>
  </div>
</div>

在这个例子中，我为每张卡片选择了 4x3 的纵横比。请在比率中查看更多信息。

推荐阅读