如何创建一个向下的网格系统答案

【问题标题】：How to create a downward grid system如何创建一个向下的网格系统
【发布时间】：2021-12-03 09:57:48
【问题描述】：

有人帮助我吗？我非常卡住，我想使用引导程序创建网格

如何创建这样的位置？

我尝试使用 col md 创建，结果是这样的

           @foreach($pallet as $row)
                @if($row->slot_status == 'Tersedia')
                    <div class="col-xs-1-5" style="margin-bottom:5vh;">
                        <a href="{{ url('admin-master/detail_slot/'. $row->id_slot) }}" class="btn btn-success" style="width:100%;">{{ $row->pallet_name }}</a>
                    </div>

                @endif
                @if($row->slot_status == 'Penuh')
                    <div class="col-xs-1-5" style="margin-bottom:5vh;">
                        <a href="{{ url('admin-master/detail_slot/'. $row->id_slot) }}" class="btn btn-danger" style="width:100%;">{{ $row->pallet_name }}</a>
                    </div>
                @endif
            @endforeach

我使用 laravel 从数据库中获取数据请帮帮我

【问题讨论】：

可以添加html吗？
当然，我的html就像这样postimg.cc/s1BW7bvz
请将您的代码作为代码添加到问题中，而不是使用图像。
我已将代码添加到我的问题中
这不是 bootstrap cols 的工作方式。您可以为每个断点添加一个col-1 到col-12。

标签： laravel bootstrap-4 layout grid

【解决方案1】：

这里使用这些类是一个例子

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

用它来打破两个 div 之间的空间

 <style >
            .col {
                padding: 50px;
            }
        </style>

这里是引导示例。 tutorial

【讨论】：