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

Posted 2023-03-17

【中文标题】如何创建一个向下的网格系统

【英文标题】：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。

【参考方案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