我正在创建一个在线商店.我需要每行有 3 个项目，还有一些空间.所以我的想法是一列 9 和 3 个子列.然后我还有 9 列剩下的 3 列供我选择.
我的问题是在几个类别中我有 4/5 个项目.所以它们都出现在 1 行.我该如何解决这个问题.
<div class="row"><div class="col-md-9"><div class="row">@foreach ($items 作为 $item)<div class="col-md-3"><img class="list-image" src="{{$item->image}}">@endforeach
您可以使用 自动布局列，不限于 12 个.
将 .col-auto 用于根据其内容调整大小的列..
<div class="col-auto"><img class="list-image"><div class="col-auto"><img class="list-image">
<div class="col-auto"><img class="list-image">
<div class="col-auto">... 到 n
或， 使用 .col 表示在行中均匀填充的列..
<div class="col"><img class="list-image"><div class="col"><img class="list-image">
<div class="col">... 到 n
演示:https://www.codeply.com/go/wqoiLlSUc5
I'm creating a online shop. I need to have 3 items per row with some space left over. So my idea was a column of 9 with 3 child columns of. Then I have 3 columns left over from the 9 for whaterever else I choose.
My issue is in a few categories I have 4/5 items. So they all appear on 1 line. How can I solved this.
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
@foreach ($items as $item)
<div class="col-md-3">
<img class="list-image" src="{{$item->image}}">
</div>
@endforeach
</div>
</div>
</div>
</div>
You can use the auto-layout columns which are not restricted to 12.
Use .col-auto for columns that size to their content..
<div class="row">
<div class="col-auto">
<img class="list-image">
</div>
<div class="col-auto">
<img class="list-image">
</div>
<div class="col-auto">
<img class="list-image">
</div>
<div class="col-auto">
... to n
</div>
</div>
or, use .col for columns that evenly fill across the row..
<div class="row">
<div class="col">
<img class="list-image">
</div>
<div class="col">
<img class="list-image">
</div>
<div class="col">
... to n
</div>
</div>
Demo: https://www.codeply.com/go/wqoiLlSUc5
这篇关于Bootstrap 4 中的 N 列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
