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
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 2

成功修改成一行 :+1:

1年前 评论

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

5个月前 评论

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