在 Bootstrap 4 中重复创建 5 列答案

【问题标题】：Create 5 columns on repeat in Bootstrap 4在 Bootstrap 4 中重复创建 5 列
【发布时间】：2019-10-22 12:17:06
【问题描述】：

我必须在 Bootstrap 4 中创建一个 5 列的网格来显示 100 多个图像。下面的代码仅在我有 5 个项目时才有效。我该怎么办？

PS：必须在手机屏幕上更改2列网格。

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

JSFiddle 演示：https://jsfiddle.net/fwg2os0h/

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
      2
   </div>
   <div class="col">
      3
   </div>
   <div class="col">
      4
   </div>
   <div class="col">
      5
   </div>
   <div class="col">
      6
   </div>
   <div class="col">
      7
   </div>
   <div class="col">
      8
   </div>
   <div class="col">
      9
   </div>
   <div class="col">
      10
   </div>
</div>

【问题讨论】：

@IvanKaraman 我不认为这真的有帮助......
@IvanKaraman 老兄！
@ElaineByene 每张图片都将被包裹在列中？
@IvanKaraman 这在很大程度上是一个 flexbox 问题......所以解决方案实际上在于 CSS。
@ElaineByene 此任务不适用于引导程序，好的解决方案是使用一些图像网格，如砖石或类似的其他解决方案来创建自定义布局...

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

也许，您可以将min-width 设置为 20%，这应该可以解决问题。在任何时候，它的最小宽度都是20%，这将迫使它每行只显示 5 个。

.my-col {
  min-width: 20%;
}

对于移动支持，请使用自定义媒体查询设置min-width: 50%。

@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

演示

这是正常时的样子。

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
  <div class="col my-col">
    5
  </div>
  <div class="col my-col">
    6
  </div>
  <div class="col my-col">
    7
  </div>
  <div class="col my-col">
    8
  </div>
  <div class="col my-col">
    9
  </div>
  <div class="col my-col">
    10
  </div>
</div>

当你少于 5 个时，它会自动显示它们是合理的。

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
</div>

【讨论】：

谢谢。没有开箱即用的 bootstrap 4 类支持吗？
@ElaineByene 不，目前还没有。但这是一个完全定制的定制需求，我认为这种解决方案不会在这样的框架中实现。
@ElaineByene 如果我们不为此使用 Bootstrap 的网格，并且任意给出 20%，那将是完美的，因为我们没有 5 列布局。它是 6 列或 4 列，因为它基于 12 列布局。
顺便说一句，发现一个问题。如果我没有确切的 5 个项目，宽度将扩展为 100%。在此处查看最后一行：jsfiddle.net/xuL8h5vm
@ElaineByene 在这里修复它：JSFiddle。只需添加具有相同值的max-width。

【解决方案2】：

我认为将基于媒体查询的列宽类添加为 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>

https://www.codeply.com/go/RRp8uUraZe

【讨论】：

快速提问。这看起来不错。但这是如何工作的？与我的解决方案相比，它只是设置max-width，我们是否也应该设置flex 属性？
我无法覆盖核心引导功能。这会给其他页面带来很多问题。
然后只需将col-sm-2 重命名为col-sm-five 之类的其他名称......概念仍然相同。
谢谢。我已经接受了其他答案，但您的解决方案也有效。非常感谢。
@PraveenKumarPurushothaman - 是的，它也适用于最大宽度，但宽度可能因列内容而异

【解决方案3】：

请查看 Bootstrap 关于grid systems 的文档。

玩弄数字以获得您想要的。 col-md- 用于平板电脑或更大的平板电脑， col-sm- 用于移动设备。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 col-sm-6">
    1
  </div>
  <div class="col-md-2 col-sm-6">
    2
  </div>
  <div class="col-md-2 col-sm-6">
    3
  </div>
  <div class="col-md-2 col-sm-6">
    4
  </div>
  <div class="col-md-2 col-sm-6">
    5
  </div>
  <div class="col-md-2 col-sm-6">
    6
  </div>
  <div class="col-md-2 col-sm-6">
    7
  </div>
  <div class="col-md-2 col-sm-6">
    8
  </div>
  <div class="col-md-2 col-sm-6">
    9
  </div>
  <div class="col-md-2 col-sm-6">
    10
  </div>
</div>

【讨论】：

你为什么用col-sm-5而不是col-sm-6？
col-md-2 将改为创建 6 列。我正在寻找创建 5 列。
好问题。现在更正了。
目前，Bootstrap 中没有任何东西可以帮助您。您必须将列的 flex 值更改为 0 0 20% 并赋予 max-width 相同的值。