轮播指示器呈现为基本标签

Question

我的 carousel-indicators 没有按应有的方式呈现，即使旋转木马本身是正确的，我已经尝试了很多修复，但 none 其中的修复有效，它们看起来像这样：

如您所见，它们的位置不佳，样式 class 似乎不适用，有人知道修复方法或我在这里做错了什么吗？

提前感谢您的帮助

body.component.html

<div id="myCarousel" class="carousel slide" data-ride="carousel" role="listbox">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>
  <div class="carousel-inner">
    <a class="carousel-item active" href="#one!" ><img src="../../assets/Couv-leaflet-Food-Processing.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="../../assets/Couv-leaflet-In-Plant-Automotive.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="../../assets/Couv-leaflet-DrinkingWater&Beverage.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="../../assets/Couv-leaflet-Textile-Machinery.jpg"></a>
    <a class="carousel-item" href="#five!"><img src="../../assets/Couv-leaflet-Industrial-Machinery.jpg"></a>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <titledigital leaflets</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel();
  });
  $('.carousel').carousel({
    interval: 2000
  })

</script>
  <app-root></app-root>
</body>
</html>

Answer 1

如果您使用的是引导程序类，您应该将此 link 添加到您的 <head></head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Answer 2

请将 Bootstrap CDN 插入您的 angular.json，它将按预期工作

"styles": [
  "styles.css"
],

轮播指示器呈现为基本标签

Carousel indicators rendering as base tag

carousel

bootstrap-4

angular