如何使用 bootstrap 5 使我的网格项目（其中包含内容的框）响应？

Question

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

我希望设置产品列表，就像在其主页上设置 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>

Answer 1

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

一个例子：See working example

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

如果像 youtube 一样，您需要为每张卡片的 width/height 保持固定的纵横比，那么有类.

的 .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 的纵横比。请在 Ratios.

查看更多信息

如何使用 bootstrap 5 使我的网格项目（其中包含内容的框）响应？

How do I make my grid items(boxes with content in them) responsive using bootstrap 5?

grid

responsive

bootstrap-5