Bootstrap-4 中每行 5 列
[英] 5 columns per row in Bootstrap-4
本文介绍了Bootstrap-4 中每行 5 列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 15 条记录，我想以每行 5 列的形式显示所有记录.所以我正在使用 bootstrap 4.col"中可用的自动列，有没有办法限制每行的列数?
注意:我必须在不破坏行的情况下连续循环列.
我想实现这样的目标
[ 1][ 2][ 3][ 4][ 5][6][7][8][9][10][11][12][13][14][15]
这是我当前的代码:
<!-- 这将创建 15 列 --><div class="col" ng-repeat="记录在记录中">{{record.title}}
但这会导致:
[1][2][3][4][5][6][7][8][9][10][11][12][13][14][15]]
解决方案
更新于 2019/12/02
对于 Bootstrap <4.4 : 摆脱这些 Bootstrap 列，只使用 flexbox 的魔力.
只需将我的 .w-20 类添加到您的 CSS 中即可.
在我的小提琴中看到它的实际效果.
对于 Bootstrap >= 4.4 : 使用全新的 row-cols-* 类
将 .row-cols-5 添加到包含元素的 .row 中.无需自定义 CSS.
在此处查看 4.4 文档:https://getbootstrap.com/docs/4.4/layout/grid/#row-columns
现在玩我的小提琴，并在我的小提琴中使用两种技术观察相同的结果:
.w-20 {-webkit-box-flex: 0;-ms-flex: 0 0 20% ！重要；弹性:0 0 20% ！重要；最大宽度:20%；}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row my-4"><div class="col"><div class="jumbotron"><h1>Bootstrap 4 - 如何设置每行 5 列</h1><p class="lead">by djibe.</p><p class="text-muted">(thx 到 BS4)</p><h2>教程</h2><h3>使用 Bootstrap 4.4+</h3><p>只需添加<code>row-cols-5</code>到包含您的元素的行</p><div class="container-fluid"><div class="row row-cols-5"><div class="col card card-body">.col
<div class="col card card-body">.col
<div class="col card card-body">.col
<div class="col card card-body">.col
<div class="col card card-body">.col
<div class="col card card-body">.col
<div class="col card card-body">.col
<hr class="my-5"><h3>使用 Bootstrap <4.4/h3<ol><li>我们将使用 CSS3 flexboxes 的魔力……或者只是从 BS 4.4 中导入 row-cols-* 类.</li><li>在每个元素上应用 .w-20 类，它会将每个元素散布在宽度或行的 1/5 上</li><li>将内置的 Bootstrap 4 类 d-flex 和 flex-wrap 应用到这 15 个元素的容器中</li><li>等瞧</li><li>这个小提琴太垃圾了，所以我不得不将 !important 定义添加到我的 CSS 类中.但是你可以在你的项目中去掉它们.</li></ol><div class="d-flex flex-wrap"><div class="card card-body w-20"><p>卡1</p><p>与同一行的卡片相比超长的内容，但所有元素将具有相同的高度</p>
<div class="card card-body w-20">卡2
<div class="card card-body w-20">卡片 3
<div class="card card-body w-20">卡片 4
<div class="card card-body w-20">卡5
<div class="card card-body w-20">卡片 6
<div class="card card-body w-20">卡片 7
<div class="card card-body w-20">卡片 8
<div class="card card-body w-20">卡9
<div class="card card-body w-20">卡10
<div class="card card-body w-20">卡11
<div class="card card-body w-20">卡12
<div class="card card-body w-20">卡13
<div class="card card-body w-20">卡片 14
<div class="card card-body w-20">卡15
I have 15 records, I want to show all of it in a 5 columns per row. So I am using the auto column available in bootstrap 4 ".col", is there a way to limit column counts per row?
Note: I have to continuously loop the columns without breaking the row.
I want to achieve something like this
[ 1][ 2][ 3][ 4][ 5]
[ 6][ 7][ 8][ 9][10]
[11][12][13][14][15]
Here's my current code:
<div class="row">
<!-- this will create 15 col -->
<div class="col" ng-repeat="record in records">
{{record.title}}
</div>
</div>
But this results to:
[1][2][3][4][5][6][7][8][9][10][11][12][13][14][15]
解决方案
Updated 2019/12/02
For Bootstrap < 4.4 : Get rid of these Bootstrap columns and just use the magic of flexboxes.
Just add my .w-20 class to your CSS.
See it in action in my fiddle.
For Bootstrap >= 4.4 : Use the brand new row-cols-* classes
Add .row-cols-5 to your .row containing elements. No custom CSS needed.
See the 4.4 doc here : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns
Now play with my fiddle and observe the same results in my fiddle with both techniques :
.w-20 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20% !important;
flex: 0 0 20% !important;
max-width: 20%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row my-4">
<div class="col">
<div class="jumbotron">
<h1>Bootstrap 4 - How to set 5 columns per row</h1>
<p class="lead">by djibe.</p>
<p class="text-muted">(thx to BS4)</p>
<h2>Tutorial</h2>
<h3>With Bootstrap 4.4+</h3>
<p>Just add <code>row-cols-5</code> to the row containing your elements</p>
<div class="container-fluid">
<div class="row row-cols-5">
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
</div>
</div>
<hr class="my-5">
<h3>With Bootstrap < 4.4</h3>
<ol>
<li>We gonna use the magic of CSS3 flexboxes ... or just import row-cols-* classes from BS 4.4.</li>
<li>Apply the class .w-20 on each element, it will spread each element on 1/5th of the width or row</li>
<li>Apply the built-in Bootstrap 4 classes d-flex and flex-wrap to the container of these 15 elements</li>
<li>Et voilà</li>
<li>This fiddle is crap so I had to add the !important definition to my CSS class. But you can get rid of them in your project.</li>
</ol>
<div class="d-flex flex-wrap">
<div class="card card-body w-20">
<p>
Card 1
</p>
<p>
Extra long content compared to the cards of the same row but all the elements will have the same height
</p>
</div>
<div class="card card-body w-20">
Card 2
</div>
<div class="card card-body w-20">
Card 3
</div>
<div class="card card-body w-20">
Card 4
</div>
<div class="card card-body w-20">
Card 5
</div>
<div class="card card-body w-20">
Card 6
</div>
<div class="card card-body w-20">
Card 7
</div>
<div class="card card-body w-20">
Card 8
</div>
<div class="card card-body w-20">
Card 9
</div>
<div class="card card-body w-20">
Card 10
</div>
<div class="card card-body w-20">
Card 11
</div>
<div class="card card-body w-20">
Card 12
</div>
<div class="card card-body w-20">
Card 13
</div>
<div class="card card-body w-20">
Card 14
</div>
<div class="card card-body w-20">
Card 15
</div>
</div>
</div>
</div>
</div>
</div>
这篇关于Bootstrap-4 中每行 5 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
