我有一个laravel项目（v5.8），我使用前端CSS框架附带的默认引导程序4。除了不敬虔的旋转木马，一切都像魅力一样运转。我怀疑这一定与laravel如何混合混合资产有关，因为如果我使用Bootstrap，jquery等CDN版本创建刀片视图，则轮播会工作。但是，如果我使用app.js，则laravel混合会生成，图像彼此堆叠。但是最奇怪的部分是轮播类型的“作品”，因为堆叠的图像确实会滑动，例如，最初它向我展示了按此顺序堆叠的三个“ 40.jpg”，“ 41.jpg”和“ 42.jpg” ，然后滑动，顶部是“ 41.jpg”，下面是“ 42.jpg”，最后，当滑动时，仅显示“ 42.jpg”，然后再次从三张图片开始。
这是我每个部分的代码：
/resources/views/test.blade.php：
@extends ('layouts.web')
@section('content')
<div class="container">
<div id="myCar" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/40.jpg" class="d-block w-100" alt="Imagen 40">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/41.jpg" class="d-block w-100" alt="Imagen 41">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/42.jpg" class="d-block w-100" alt="Imagen 42">
</div>
</div>
<a class="carousel-control-prev" href="#myCar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
@endsection
@section('footerScripts')
@parent
@endsection
在layouts.web中，我定义了页眉，页脚，菜单，样式链接，脚本等。
/resources/js/app.js：
require('./bootstrap');
import $ from 'jquery';
window.$ = window.jQuery = $;
/resources/js/bootstrap.js：
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
最后，我使用laravel mix和webpack编译我的资产：
/webpack.mix.js：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.setPublicPath('public');
mix.setResourceRoot('../');
我找不到问题所在。我认为Bootstrap正确加载，因为我已经为菜单，标题，布局网格使用了bootstrap类。我认为jquery也可以正确加载，因为我有一个“转到顶部”箭头，在使用jquery滚动时会隐藏/显示。所以我完全迷失了，我找不到为什么图像会彼此堆叠的原因。
很抱歉，我的帖子过大，但由于我无法确定问题所在，因此我试图做到最具体。谢谢您的帮助。
编辑：我忘了包含laravel生成的页面的源代码，也许那里的错误更明显：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="Fp766WwnOt1vKyUE4fe7bYsRk0VNtBhRQYBmSKfN">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>#</title>
<link rel="apple-touch-icon" sizes="57x57" href="http://localhost:81/witinea/public/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://localhost:81/witinea/public/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://localhost:81/witinea/public/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://localhost:81/witinea/public/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://localhost:81/witinea/public/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://localhost:81/witinea/public/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://localhost:81/witinea/public/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://localhost:81/witinea/public/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:81/witinea/public/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="http://localhost:81/witinea/public/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:81/witinea/public/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="http://localhost:81/witinea/public/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:81/witinea/public/favicon-16x16.png">
<link rel="manifest" href="http://localhost:81/witinea/public/manifest.json">
<link rel="icon" href="http://localhost:81/witinea/public/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://localhost:81/witinea/public/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script>
</script>
<link href="http://localhost:81/witinea/public/css/app.css" rel="stylesheet" />
</head>
<body>
<a href="#" id="return-to-top"><i class="fas fa-chevron-up"></i></a>
<header>
<div class="container-fluid">
<nav id="main" class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-custom">
<div class="container-fluid">
<a href="http://localhost:81/witinea/public/index.php" class="navbar-brand"><img src="http://localhost:81/witinea/public/img/witinea_logo.png" width="313" height="100" class="img-fluid"></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#w0-collapse" aria-controls="w0-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="w0-collapse" class="collapse navbar-collapse">
<ul id="w1" class="navbar-nav">
<li class="nav-item h5 font-weight-bold"><a class="nav-link active text-primary" href="http://localhost:81/witinea/public/index.php#QuienesSomos">Quiénes Somos</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php#Servicios">Nuestros Servicios</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php#Clientes">Clientes</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php/galeria">Galerías</a></li>
<li class="nav-item h5 font-weight-bold"><a class="nav-link text-primary" href="http://localhost:81/witinea/public/index.php#Contacto">Contáctanos</a></li>
</ul>
<ul id="w2" class="navbar-nav ml-auto">
<li class="nav-item h4"><a class="nav-link text-info" href="https://www.facebook.com/ConsultoresWitinea/" target="_blank"><i class="fab fa-facebook-f "></i></a></li>
<li class="nav-item h4"><a class="nav-link text-info" href="" target="_blank"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="container">
<div id="myCar" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/40.jpg" class="d-block w-100" alt="Imagen 40">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/41.jpg" class="d-block w-100" alt="Imagen 41">
</div>
<div class="carousel-item">
<img src="http://localhost:81/witinea/storage/public/img/gallery/general/42.jpg" class="d-block w-100" alt="Imagen 42">
</div>
</div>
<a class="carousel-control-prev" href="#myCar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</main>
<footer class="bg-secondary">
<div class="container">
<div class="row">
<div class="col-5 small text-light">
Copyright © 2019
<a class="text-light pl-2" href="#" target="_blank"><i class="fab fa-facebook-f "></i></a>
<a class="text-light pl-2" href="" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
<script src="http://localhost:81/witinea/public/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>
答案 0 :(得分：0)
对不起。我发现了问题。我是一个白痴。问题是我在主要CSS中添加了一些自定义样式，这些样式与轮播类冲突。