Bootstrap-4中每行5列 [英] 5 columns per row in Bootstrap-4
问题描述
我有15条记录,我想在每行5列中显示所有记录.因此,我正在使用引导程序4".col"中可用的自动列,是否有办法限制每行的列数?
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.
我想实现这样的目标
[ 1][ 2][ 3][ 4][ 5]
[ 6][ 7][ 8][ 9][10]
[11][12][13][14][15]
这是我当前的代码:
<div class="row">
<!-- this will create 15 col -->
<div class="col" ng-repeat="record in records">
{{record.title}}
</div>
</div>
但这导致:
[1][2][3][4][5][6][7][8][9][10][11][12][13][14][15]
推荐答案
更新于2019/12/02
Updated 2019/12/02
只需将我的.w-20
类添加到您的CSS中即可.
Just add my .w-20
class to your CSS.
在我的小提琴中观看它的动作.
See it in action in my fiddle.
将.row-cols-5
添加到包含元素的.row
中.无需自定义CSS.
Add .row-cols-5
to your .row
containing elements. No custom CSS needed.
在此处查看4.4文档: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns
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屋!