如何使用Bootstrap实现向下排列的网格系统？

问题原因排查 #

你当前布局错位主要有两个核心问题：

• Bootstrap 原生栅格为12等分，不存在默认的col-xs-1-5类，你自定义的该类样式大概率没有和Bootstrap栅格系统的间距、浮动规则匹配
• 所有col类元素必须包裹在.row容器内，缺少外层row容器会导致浮动无法清除、间距异常，出现排列错位

解决方案 #

方案1：Bootstrap 4/5 推荐方案（无需自定义列类）

Bootstrap 4以上版本提供了row-cols-*系列类，可以直接指定每行展示的元素数量，原生适配栅格规则，无需额外自定义样式：

<!-- 外层row容器，指定xs屏每行5个，小屏可以根据需求调整，比如加row-cols-sm-2实现移动端每行2个 -->
<div class="row row-cols-xs-5 g-3">
@foreach($pallet as $row)
    <div class="col">
        <a href="{{ url('admin-master/detail_slot/'. $row->id_slot) }}" 
           class="btn w-100 {{ $row->slot_status == 'Tersedia' ? 'btn-success' : 'btn-danger' }}">
            {{ $row->pallet_name }}
        </a>
    </div>
@endforeach
</div>

其中g-3是设置列之间的间距，你可以根据需求调整间距大小，也可以保留你原来的margin-bottom:5vh样式。

方案2：Bootstrap 3 兼容方案

如果使用Bootstrap 3版本，没有row-cols类，你可以先补充自定义列的CSS样式，同时确保外层包裹row容器：

1. 先添加自定义CSS：

.col-xs-1-5 {
    width: 20%;
    float: left;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}
/* 可选：移动端适配，小于768px时每行2个 */
@media (max-width: 767px) {
    .col-xs-1-5 {
        width: 50%;
    }
}

2. 调整blade代码，外层补row容器：

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

内容的提问来源于stack exchange，提问作者mfahmifadh