引导 4 轮播问题在其他浏览器,但不是谷歌浏览器



我对 Bootstrap 4.3.1 中的轮播有问题。 Bootstrap.css不是自定义的。它在谷歌浏览器中工作正常,但在火狐和Internet Explorer中,将图片缩放成更小的尺寸时存在问题?

您可以在着陆页上看到问题:https://e90-parts.de/你能帮我修复它吗?

这是代码。它是 Bootstrap 页面上示例的编辑版本。

<div id="welcome" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#welcome" data-slide-to="0" class="active"></li>
    <li data-target="#welcome" data-slide-to="1"></li>
    <li data-target="#welcome" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img
        src="https://www.kohl.de/webshop/media/image/20/7d/60/20685035c8a385247a18.jpg"
        class="d-block w-100"
        alt="..."
      />
      <div class="carousel-caption d-block">
        <h5>Teileauswahl</h5>
        <a class="btn btn-primary" href="#Kategorien">Kategorie auswählen</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="images/parts/8273.png" class="d-block w-100" alt="..." />
      <div class="carousel-caption d-block">
        <h5>Navigationssysteme</h5>
        <a href="index.php?site=parts&page=navi" class="btn btn-primary"
          >Android 9.0 Navis</a
        >
      </div>
    </div>
    <div class="carousel-item">
      <img
        src="https://cdn.autodoc.de/thumb?id=7583929&m=0&n=0&lang=de&ccf=21876029"
        class="d-block w-100"
        alt="..."
      />
      <div class="carousel-caption d-block">
        <h5>Fahrwerke</h5>
        <a class="btn btn-primary" href="index.php?site=parts&page=chassis"
          >Fahrwerke</a
        >
      </div>
    </div>
  </div>
  <a
    class="carousel-control-prev"
    href="#welcome"
    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="#welcome"
    role="button"
    data-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

问题解决了。它是由外部轮播引起的,该轮播包含在页面上的另一个文件中。其中有一些额外的代码,用于编辑轮播中的脚本和样式。

最新更新