css - 轮播不显示在页面上答案

【问题标题】：css - carousel not displaying on pagecss - 轮播不显示在页面上
【发布时间】：2019-03-28 19:22:34
【问题描述】：

我刚刚尝试向我的模板添加轮播。我从documentation 复制了代码，但这是我得到的：

似乎轮播类被忽略了。我不明白我做错了什么，因为我从文档中复制了代码。为什么我没有轮播？我遵循了文档，出于某种原因，我的浏览器根本没有显示轮播。我得到的只是图片太大了。我做错了什么？

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<style type="text/css">
 /* navbar */

    .navbar-default {
      background-color: #337ab7;
      border-color: #E7E7E7;
    }

    /* Title */

    .navbar-default .navbar-brand {
      color: #777;
    }

    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
      color: #5E5E5E;
    }

    /* Link */

    .navbar-default .navbar-nav>li>a {
      color: #777;
    }

    .navbar-default .navbar-nav>li>a:hover,
    .navbar-default .navbar-nav>li>a:focus {
      color: #333;
    }

    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
      color: #555;
      background-color: #E7E7E7;
    }

    .navbar-default .navbar-nav>.open>a,
    .navbar-default .navbar-nav>.open>a:hover,
    .navbar-default .navbar-nav>.open>a:focus {
      color: #555;
      background-color: #D5D5D5;
    }

    /* Caret */

    .navbar-default .navbar-nav>.dropdown>a .caret {
      border-top-color: #777;
      border-bottom-color: #777;
    }

    .navbar-default .navbar-nav>.dropdown>a:hover .caret,
    .navbar-default .navbar-nav>.dropdown>a:focus .caret {
      border-top-color: #333;
      border-bottom-color: #333;
    }

    .navbar-default .navbar-nav>.open>a .caret,
    .navbar-default .navbar-nav>.open>a:hover .caret,
    .navbar-default .navbar-nav>.open>a:focus .caret {
      border-top-color: #555;
      border-bottom-color: #555;
    }

    /* Mobile version */

    .navbar-default .navbar-toggle {
      border-color: #DDD;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: #DDD;
    }

    .navbar-default .navbar-toggle .icon-bar {
      background-color: #CCC;
    }

    @media (max-width: 767px) {
      .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #777;
      }
      .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #333;
      }
    }

    .navbar-top {
      padding-left: 150px;
      font-size: 10px;
      width: 92%;
      margin: 0 auto;
    }
    .carousel-inner > .item >img{
  min-height :100px;
  max-height : 100px;
  width : 100%;
}
</style>
</head>
<body>
    <nav class="navbar mobile navbar-default visible-xs">
    <div class="navbar-header navbar-top">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-sm-4" style="color:#fff">
            <strong>Cryptocurrencies</strong> 1000 / Markets 1000</div>
          <div class="col-sm-5" style="color:#fff">
            <strong>Market Cap</strong>:$263,920,404,123
            <strong>24h Vol</strong>:$15,360,994,812
          </div>
          <div class="col-sm-3">
            <button type="button" class="btn btn-info btn-sm">Submit ICO</button>
            <button type="button" class="btn btn-info btn-sm">Login</button>
          </div>
        </div>
      </div>
    </div>
  </nav>
<div class="container">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/coins_icons/bt2_.png" alt="First slide]">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" width="100" height="100" src="images/coins_icons/bt2_.png" alt="First slide]">
    </div>
    <div class="carousel-item">
       <img class="d-block w-100" width="100" height="100" src="images/coins_icons/bt2_.png" alt="First slide]">
    </div>
  </div>
</div>
</div>
</body>
</html>

【问题讨论】：

可能有几个原因。您没有包含必要的 javascript，图像可能很大，而您没有明确调整它们的大小。
刚刚添加了 JavaScript 并调整了图像大小，它们仍然没有滚动

标签： css twitter-bootstrap carousel

【解决方案1】：

只要把旋转木马放在容器里就可以了。

<div class="container">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/coins_icons/bt2_.png" alt="First slide]">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/coins_icons/bt2_.png" alt="First slide]">
    </div>
    <div class="carousel-item">
       <img class="d-block w-100" src="images/coins_icons/bt2_.png" alt="First slide]">
    </div>
  </div>
</div>
</div>

【讨论】：

我已经编辑了我的 OP 并添加了容器。现在奇怪的是，当我在 IMG 标签上设置宽度和高度属性时，它不会调整大小。另外，我的轮播仍然不会切换图像。

【解决方案2】：

你还需要下面的脚本来切换图片

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

关于宽度和高度，“w-100”或width='100'类都可以，但你不需要同时使用这两个

【讨论】：