Css 在引导数据库4中重复创建5列

我必须在Bootstrap4中创建一个5列网格来显示100多个图像。以下代码仅在我有5项时有效。我该怎么做呢

PS：必须更改移动屏幕上的2列网格

我知道有很多重复的正确答案，但当我有超过5列时，并没有实际的解决方案

JSFIDLE演示：

也许，您可以将最小宽度设置为20%，这应该可以解决它。在任何时候，这将有一个最小宽度为20%，这将迫使它显示只有5行

.我的上校{ 最小宽度：20%； } 对于移动支持，请使用自定义媒体查询设置最小宽度：50%

@媒体屏幕和最大宽度：480px{ .我的上校{ 最小宽度：50%； } } 演示

这是正常情况下的情况

.我的上校{ 最小宽度：20%； } @媒体屏幕和最大宽度：480px{ .我的上校{ 最小宽度：50%； } } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 也许，您可以将最小宽度设置为20%，这应该可以解决它。在任何时候，这将有一个最小宽度为20%，这将迫使它显示只有5行

.我的上校{ 最小宽度：20%； } 对于移动支持，请使用自定义媒体查询设置最小宽度：50%

@媒体屏幕和最大宽度：480px{ .我的上校{ 最小宽度：50%； } } 演示

这是正常情况下的情况

.我的上校{ 最小宽度：20%； } @媒体屏幕和最大宽度：480px{ .我的上校{ 最小宽度：50%； } } 1. 2. 3. 4. 5. 6. 7. 8. 9 10

---

我认为添加一个基于媒体查询的列宽类（20%）是最简单的

@media (min-width: 768px){
    .col-sm-five {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


<div class="container">
    <div class="row">
        <div class="col-6 col-sm-five">
            1
        </div>
        <div class="col-6 col-sm-five">
            2
        </div>
        <div class="col-6 col-sm-five">
            3
        </div>
         ..
     </div> 
</div>

---

我认为添加一个基于媒体查询的列宽类（20%）是最简单的

@media (min-width: 768px){
    .col-sm-five {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


<div class="container">
    <div class="row">
        <div class="col-6 col-sm-five">
            1
        </div>
        <div class="col-6 col-sm-five">
            2
        </div>
        <div class="col-6 col-sm-five">
            3
        </div>
         ..
     </div> 
</div>

---

请查看Bootstrap的文档

玩数字游戏，得到你想要的。col md-适用于平板电脑或更大型号，col sm-适用于手机

1. 2. 3. 4. 5. 6. 7. 8. 9 10

---

请查看Bootstrap的文档

玩数字游戏，得到你想要的。col md-适用于平板电脑或更大型号，col sm-适用于手机

1. 2. 3. 4. 5. 6. 7. 8. 9 10

---

---

@IvanKaraman我不认为这真的有帮助…@IvanKaraman Dude@ElaineByene每个图像都将被包装在列中？@IvanKaraman这是一个非常灵活的问题。。。因此，解决方案实际上在于CSS。@ElaineByene此任务不适用于引导，好的解决方案是使用一些图像网格，如砖石或类似的其他解决方案来创建自定义布局…@IvanKaraman我认为这没有什么帮助…@IvanKaraman Dude@ElaineByene每个图像都将被包装在列中？@IvanKaraman这是一个非常灵活的问题。。。因此，解决方案实际上在于CSS。@ElaineByene此任务不适用于引导，好的解决方案是使用一些图像网格，如砖石或类似的其他解决方案来创建自定义布局……谢谢。没有支持这种开箱即用的Bootstrap4类吗？@ElaineByene没有，目前还没有。但这是一个完全定制的定制需求，我不认为这种解决方案会在这样的框架中实现。@ElaineByene如果我们不使用引导的网格，任意给出20%，这将是完美的，因为我们没有5列布局。它是6列或4列，因为它基于12列布局。顺便说一句，发现了一个问题。如果我没有精确的5项，宽度将扩展到100%。查看此处的最后一行：@ElaineByene在此处修复了它：。只需添加相同值的最大宽度即可。谢谢。没有支持这种开箱即用的Bootstrap4类吗？@ElaineByene没有，目前还没有。但这是一个完全定制的定制需求，我不认为这种解决方案会在这样的框架中实现。@ElaineByene如果我们不使用引导的网格，任意给出20%，这将是完美的，因为我们没有5列布局。它是6列或4列，因为它基于12列布局。顺便说一句，发现了一个问题。如果我没有精确的5项，宽度将扩展到100%。查看此处的最后一行：@ElaineByene在此处修复了它：。只需添加相同值的最大宽度。快速提问。这个看起来不错。但是这是如何工作的呢？与我的解决方案（只设置了最大宽度）相比，我们是否也应该设置flex属性？我无法覆盖核心引导函数。这会给其他页面带来很多问题。然后只需将col-sm-2重命名为类似col-sm-5的其他页面即可。。。概念还是一样，谢谢。我已经接受了另一个答案，但你的解决方案也有效。非常感谢。@PraveenKumarPurushothaman-是的，它与

---

也只是最大宽度，但宽度可能会根据列内容的不同而变化。这个看起来不错。但是这是如何工作的呢？与我的解决方案（只设置了最大宽度）相比，我们是否也应该设置flex属性？我无法覆盖核心引导函数。这会给其他页面带来很多问题。然后只需将col-sm-2重命名为类似col-sm-5的其他页面即可。。。概念还是一样，谢谢。我已经接受了另一个答案，但你的解决方案也有效。非常感谢。@PraveenKumarPurushothaman-是的，它也可以使用最大宽度，但宽度可能会根据列内容而有所不同。为什么使用col-sm-5而不是col-sm-6？col-md-2将创建6列。我想创建5个专栏。问得好。现在更正了。目前，引导程序中没有任何东西可以帮助您解决这个问题。您必须将列的flex值更改为0 20%，并为最大宽度提供相同的值。为什么使用col-sm-5而不是col-sm-6？col-md-2将创建6列。我想创建5个专栏。问得好。现在更正了。目前，引导程序中没有任何东西可以帮助您解决这个问题。您必须将列的flex值更改为0 20%，并为max width指定相同的值。