Laravel项目中selectpicker等前端元素无法正常显示求助

核心问题分析 #

你的代码存在两个关键问题：资源加载顺序错误和缺少Bootstrap核心样式文件，同时selectpicker组件需要手动初始化才能生效。

具体修复步骤 #

1. 调整资源加载顺序，补充缺失的Bootstrap CSS #

CSS文件必须在JS文件之前加载，且你遗漏了Bootstrap的核心样式——这会导致btn-primary等Bootstrap基础样式失效，同时selectpicker也依赖Bootstrap CSS才能正常渲染。修改<head>部分的资源顺序：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- 先加载CSS资源 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
    <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

    <!-- 再加载JS资源 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
</head>

2. 手动初始化selectpicker组件 #

bootstrap-select不会自动完成初始化，需要在页面DOM加载完成后调用初始化方法。在<body>末尾添加以下脚本：

<script>
    $(document).ready(function(){
        $('.selectpicker').selectpicker();
    });
</script>

3. 排查app.css的样式冲突 #

如果修复后仍有异常，检查app.css中是否存在覆盖Bootstrap或selectpicker默认样式的代码（比如全局的select、.btn样式重置），可临时注释app.css的引用，测试是否是样式冲突导致的问题。

完整修复后的代码示例 #

<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- CSS资源 -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

        <!-- JS资源 -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div class="container">
          <br />
          <form action="{{url('stock/add')}}" method="post">
            {{ csrf_field() }}
            <div class="form-group">
               <label for="stockName">Stock Name:</label>
               <input type="text" class="form-control" id="stockName" name="stockName">
             </div>
             <div class="form-group">
               <label for="stockPrice">Stock Price:</label>
               <input type="text" class="form-control" id="stockPrice" name="stockPrice">
             </div>
             <div class="form-group">
               <label for="stockPrice">Stock Year:</label>
               <select class="selectpicker" name="stockYear">
                  <option value="1991">1991</option>
                  <option value="1992">1992</option>
                  <option value="1993">1993</option>
                  <option value="1994">1994</option>
                  <option value="1995">1995</option>
                  <option value="1996">1996</option>
              </select>
            </div>
             <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>

        <!-- 初始化selectpicker -->
        <script>
            $(document).ready(function(){
                $('.selectpicker').selectpicker();
            });
        </script>
    </body>
</html>

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