Question

我刚刚尝试过在模板中添加轮播。我从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>

Answer 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>

Answer 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'都可以，但是您不必同时使用这两个值

CSS-轮播不显示在页面上

2 个答案: