时间戳

首页 > 解决方案 > 每行 5 张响应卡，带引导程序 4

twitter-bootstrap - 每行 5 张响应卡，带引导程序 4

问题描述

我可能会问一个已经被问过的问题，但我没有设法找到一个明确的解决方案并适应我的情况：

我使用引导程序 4，我想使用网格显示电影海报，但我想每行显示 5 个项目，如下图所示，我可以显示 6 个项目，4 个项目，但我不能做到 5项目。

例子

每个项目都使用我自定义的引导卡组件。

我指定这些项目是使用循环动态生成的，并且可以删除其中一个项目，因此如果我删除一个项目，我就不必破坏我的网格。

感谢您的帮助和回答。

标签： twitter-bootstrapbootstrap-4

解决方案

在最新的Bootstrap >= 4.4中：使用全新的row-cols-*类添加row-cols-5到您的row包含元素中。所以不需要自定义 CSS。
如果您想根据需要在Extra Large++屏幕上Large中断，Medium请使用in 。Smallrow-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5row

Bootstrap 4.4 文档：https ://getbootstrap.com/docs/4.4/layout/grid/#row-columns

注意：检查下面的代码段，Full Page然后您可以看到 5 列并调整浏览器大小，然后您也可以看到breaking columns。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid mb-4">
  <div class="row justify-content-center row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/7fec59/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/f9d737/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/81f0f4/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/a1adfa/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/f86f6f/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/ed7d31/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/a5a5a5/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/ffc000/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/5b9bd5/FFFFFF" alt="...">
      </div>
    </div>
  </div>
</div>

推荐阅读