Twitter bootstrap 每行5张响应卡,带引导4

Twitter bootstrap 每行5张响应卡,带引导4,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我可能问了一个已经被问过的问题,但我没有找到一个明确的解决方案并适应我的情况: 我使用bootstrap 4,我想用网格显示电影海报,但我想每行显示5个项目,正如我在下面的图片中所示,我可以显示6个项目,4个项目,但我不能显示5个项目 每个项目都使用我定制的引导卡组件 我指定项目是使用循环动态生成的,并且可以删除其中一个项目,因此如果删除一个项目,就不必中断网格 感谢您的帮助和回答。使用此选项:偏移其中一列 卡片标题11 一些快速示例文本,用于构建卡片标题并构成卡片内容的大部分 卡片标题 一些快

我可能问了一个已经被问过的问题,但我没有找到一个明确的解决方案并适应我的情况:

我使用bootstrap 4,我想用网格显示电影海报,但我想每行显示5个项目,正如我在下面的图片中所示,我可以显示6个项目,4个项目,但我不能显示5个项目

每个项目都使用我定制的引导卡组件

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


感谢您的帮助和回答。

使用此选项:偏移其中一列

卡片标题11

一些快速示例文本,用于构建卡片标题并构成卡片内容的大部分

卡片标题

一些快速示例文本,用于构建卡片标题并构成卡片内容的大部分

卡片标题

一些快速示例文本,用于构建卡片标题并构成卡片内容的大部分

卡片标题

一些快速示例文本,用于构建卡片标题并构成卡片内容的大部分

卡片标题

一些快速示例文本,用于构建卡片标题并构成卡片内容的大部分

在最新的引导>=4.4中:使用全新的行cols-*类 将row-cols-5添加到包含元素的行中。因此不需要定制CSS。 如果您想根据需要在超大+大+中+小屏幕上切换,请使用row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5

Bootstrap 4.4文档如下:

注意:在整个页面上选中下面的代码段,然后你们可以看到5列,并调整浏览器的大小,然后你们也可以看到断开的列


它仅适用于第一行,我有12个以上的项目要显示,我使用循环显示这些项目。如果将获取的值除以5并将它们放入循环中,它将起作用。实际上,有两个嵌套循环。将此行-cols-5添加到包含元素的行中。