Bootstrap 4中的N列数 [英] N number of columns in Bootstrap 4

问题描述

我正在创建一家网上商店.我需要每行3个项目，剩余一些空间.所以我的想法是9列，其中3列为子列.然后，我会从9列中剩下3列，以便选择其他任何内容.

我的问题在几个类别中，我有4/5个项目.因此它们全部出现在1行上.我该如何解决.

<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>

解决方案

您可以使用自动布局列，不限于12 .

对于要调整其内容大小的列，请使用.col-auto.

<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>

或 使用.col表示在行中均匀填充的列.

<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>

演示: 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屋！