Laravel8环境下,筛选组件使用教程中的样式不适用的问题。

教程中的筛选组件的样式不适用 Laravel8 的原因如下:

1. 我的开发环境前端使用 bootstrap 的版本 ^5.1.3:

Laravel8 bootstrap5 页面 class="form-row" 修改为 class="row g-2"

2. Bootstrap5 的文档关于 form-row 的修改为 row g-n 这种形式, 其中 n 代表想要同行的元素个数。

Laravel8 bootstrap5 页面 class="form-row" 修改为 class="row g-2"

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>
    <!-- 筛选组件结束 -->
Xiao Peng
laravel_peng
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 2

成功修改成一行 :+1:

1年前 评论

不完美,虽然出现在了一行,但是排序方式没有靠右,排序方式空行空间不足,也没有上下小箭头

5个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!