Laravel 5.6中Bootstrap样式与JS失效问题求助

云上老周

2026-5-21

Hey there! Let's troubleshoot why your Bootstrap styles and JavaScript aren't working in your Laravel 5.6 project. I've spotted a few key areas we can check step by step:

Looking at your code, there are unclosed tags and incomplete elements that could break Bootstrap's rendering. Here's the corrected, complete Bootstrap 3 navbar structure (since you're using navbar-inverse, which is a Bootstrap 3 class):

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Your App Name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

Missing closing tags or incomplete elements can prevent browsers from parsing the navbar correctly, which makes Bootstrap's styles and JS fail to apply.

2. Ensure Bootstrap & jQuery Are Properly Set Up in Laravel Mix

Laravel 5.6 uses Laravel Mix to manage front-end assets, so let's confirm your resources are configured correctly:

First, install the required dependencies (Bootstrap 3 needs jQuery):
```
npm install bootstrap@3 jquery --save
```
Open resources/assets/js/app.js and add these lines to import jQuery and Bootstrap JS:
```
window.$ = window.jQuery = require('jquery');
require('bootstrap');
```
Open resources/assets/sass/app.scss and import Bootstrap's styles:
```
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
```
Compile your assets with Mix:
```
npm run dev
```
Finally, make sure your Blade template loads the compiled assets. Add this in the <head> section for CSS:
```
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
```
And this right before the closing </body> tag for JS:
```
<script src="{{ asset('js/app.js') }}"></script>
```

3. Verify Template Inheritance (If Using Layouts)

If you're using a master layout (like app.blade.php), ensure your navbar template extends it with @extends('layouts.app') and places the navbar in the correct section. The master layout must include the CSS and JS imports mentioned above.

4. Clear Caches

Sometimes cached assets or views can cause issues. Run these commands to clear Laravel's cache:

php artisan cache:clear
php artisan view:clear

Then force-refresh your browser (Ctrl+Shift+R) to clear local cache.

Give these steps a try—most likely the combination of fixing the HTML syntax and ensuring proper asset setup will get your Bootstrap navbar working as expected!

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