【问题标题】:Bootstrap 4 carousel problem in other browsers but not Google Chrome其他浏览器中的 Bootstrap 4 轮播问题,但不是 Google Chrome
【发布时间】:2019-11-28 20:59:15
【问题描述】:

我在使用 Bootstrap 4.3.1 的轮播时遇到问题。 Bootstrap.css 不是自定义的。它在 Google Chrome 中运行良好,但在 Firefox 和 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>

【问题讨论】:

    标签: google-chrome firefox bootstrap-4 carousel image-scaling


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 2017-06-29
      • 2020-04-09
      • 2015-02-27
      • 1970-01-01
      • 2023-03-13
      • 1970-01-01
      • 1970-01-01
      • 2012-03-04
      • 2013-09-29
      相关资源
      最近更新 更多