Fatal编程技术网
  • css/
  • css-旋转木马不显示在页面上

css-旋转木马不显示在页面上

css twitter-bootstrap

css-旋转木马不显示在页面上,css,twitter-bootstrap,carousel,Css,Twitter Bootstrap,Carousel,我刚刚尝试将旋转木马添加到我的模板中。我从中复制了代码，但我得到的是： 旋转木马类似乎被忽略了。我不明白我做错了什么，因为我从文档中复制了代码。为什么我没有旋转木马？我遵循文件，出于某种原因， 我的浏览器根本不显示旋转木马。我得到的只是那张太大的照片。我做错了什么 <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/boot

我刚刚尝试将旋转木马添加到我的模板中。我从中复制了代码，但我得到的是：

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

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


/*导航栏*/
.navbar默认值{
背景色：#337ab7；
边框颜色：#E7E7E7；
}
/*头衔*/
.navbar默认值.navbar品牌{
颜色：#777；
}
.navbar默认值。navbar品牌：悬停，
.navbar默认值。navbar品牌：焦点{
颜色：#5e5e；
}
/*链接*/
.navbar默认值.navbar nav>li>a{
颜色：#777；
}
.navbar默认值.navbar nav>li>a:悬停，
.navbar默认值。navbar导航>li>a:焦点{
颜色：#333；
}
.navbar默认值.navbar nav>.active>a，
.navbar默认值.navbar nav>.active>a:悬停，
.navbar默认值.navbar nav>.active>a:焦点{
颜色：#555；
背景色：#E7E7E7；
}
.navbar默认值.navbar导航>.open>a，
.navbar默认值.navbar导航>.open>a:悬停，
.navbar默认值.navbar导航>.open>a:焦点{
颜色：#555；
背景色：#D5D5D5；
}
/*插入符号*/
.navbar默认值.navbar导航>.dropdown>a.caret{
边框顶部颜色：#777；
边框底色：#777；
}
.navbar默认值.navbar nav>.dropdown>a:hover.caret，
.navbar默认值.navbar nav>.dropdown>a:focus.caret{
边框顶部颜色：#333；
边框底色：#333；
}
.navbar默认值.navbar nav>.open>a.caret，
.navbar默认值.navbar nav>.open>a:hover.caret，
.navbar默认值.navbar nav>.open>a:focus.caret{
边框顶部颜色：#555；
边框底色：#555；
}
/*手机版*/
.navbar默认值.navbar切换{
边框颜色：#DDD；
}
.navbar默认值.navbar切换：悬停，
.navbar默认值。navbar切换：焦点{
背景色：#DDD；
}
.navbar默认值.navbar切换.图标栏{
背景色：#CCC；
}
@介质（最大宽度：767px）{
.navbar默认值.navbar导航打开.下拉菜单>li>a{
颜色：#777；
}
.navbar默认值.navbar导航打开.下拉菜单>li>a:悬停，
.navbar默认值.navbar导航打开.下拉菜单>li>a:焦点{
颜色：#333；
}
}
.导航栏顶部{
左侧填充：150px；
字体大小：10px；
宽度：92%；
保证金：0自动；
}
.carousel-inner>.item>img{
最小高度：100px；
最大高度：100px；
宽度：100%；
}
加密货币1000/市场1000
市值：26392040123美元
24小时销量：15360994812美元
提交ICO
登录
只要把转盘放在集装箱内就可以了

<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>
您还需要以下脚本来切换图像

<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'可以工作，但您不需要同时使用这两个

可能有两个原因。你没有包含必要的javascript，图像可能很大，但你没有明确调整它们的大小。只是添加了javascript并调整了图像的大小，它们仍然没有滚动。我已经编辑了我的OP并添加了容器。奇怪的是，当我在IMG标签上设置一个width和height属性时，它不会调整大小。此外，我的旋转木马仍然不会切换图像。