我想让我的版面宽5列，但只能在xl屏幕及以上的屏幕上。对于大屏幕，我想要4列，对于中号也要4列，对于小/特大号要2列。
目前有：
<div class="row mb-5">
{% for item in foobar %}
<div class="col-6 col-md-3 col-xl-2 py-2">
/* Content Here */
</div>
{% endfor %}
</div>
这是我到目前为止所管理的。它适用于所有屏幕尺寸，但xl屏幕除外，我想要5列，但我得到6列。
显然12不能被5整除，所以我不确定如何实现我想要的。
我曾尝试解决的问题：
在研究了其他一些堆栈交换答案之后，我尝试将row-cols-xl-5添加到行类，但这没有任何效果。我也尝试在包含内容的div之前添加<div class="col offset1-xl"></div>，尽管它确实给了我5列，但它适用于所有屏幕尺寸，并且使相邻的行无法正确对齐，并给出了奇怪的间距。
最简单/最佳的方法是什么？
[我知道在stackexchange上已经存在类似的问题，但是这是不同的，因为它要获取5列，但没有涉及屏幕尺寸，我希望它具有响应性，因此在某些尺寸的屏幕上只有5列！
您可以在一行中为5列创建自己的CSS类。请使用媒体查询将此类仅应用于xl屏幕。
演示片段：
.col-20{
width: calc(100% / 5);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create three equal-width columns.</p>
<div class="row">
<div class="col-20 col" style="background-color:lavender;">.col</div>
<div class="col-20 col" style="background-color:orange;">.col</div>
<div class="col-20 col" style="background-color:lavender;">.col</div>
<div class="col-20 col" style="background-color:orange;">.col</div>
<div class="col-20 col" style="background-color:lavender;">.col</div>
</div>
</div>
</body>
</html>您单独尝试了col-lx类吗？它会自动适应您的需求，例如：
<div class="row mb-5">
<div class="col-xl col-lg-3 col-md-3 col-sm-6">
//Content
</div>
</div>
请让我知道是否有帮助。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row mb-5">
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-warning">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-warning">
123
</div>
<div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
123
</div>
</div>