Laravel8环境下,筛选组件使用教程中的样式不适用的问题。
教程中的筛选组件的样式不适用 Laravel8 的原因如下:#
1. 我的开发环境前端使用 bootstrap 的版本 ^5.1.3
:#
2. Bootstrap5 的文档关于 form-row
的修改为 row g-n
这种形式, 其中 n 代表想要同行的元素个数。#
3. 所以代码的修改#
<!-- 筛选组件开始 -->
<form action="{{ route('products.index') }}" class="search-form">
<!-- row 这个修改很重要,同行两个元素 -->
<div class="row g-2">
<div class="col-md-9">
<!-- row 这个修改很重要,同行两个元素 -->
<div class="row g-2">
<div class="col-auto"><input type="text" class="form-control form-control-sm" name="search" placeholder="搜索"></div>
<div class="col-auto"><button class="btn btn-primary btn-sm">搜索</button></div>
</div>
</div>
<div class="col-md-3">
<select name="order" class="form-control form-control-sm float-right">
<option value="">排序方式</option>
<option value="price_asc">价格从低到高</option>
<option value="price_desc">价格从高到低</option>
<option value="sold_count_desc">销量从高到低</option>
<option value="sold_count_asc">销量从低到高</option>
<option value="rating_desc">评价从高到低</option>
<option value="rating_asc">评价从低到高</option>
</select>
</div>
</div>
</form>
<!-- 筛选组件结束 -->
推荐文章: