css - css - 轮播不显示在页面上
问题描述
我刚刚尝试在我的模板中添加一个轮播。我从文档中复制了代码,但这就是我得到的:
轮播课程似乎被忽略了。我不明白我做错了什么,因为我从文档中复制了代码。为什么我没有轮播?我遵循了文档,由于某种原因,我的浏览器根本没有显示轮播。我得到的只是图片太大了。我究竟做错了什么?
<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>
解决方案
只需将旋转木马放入容器内即可。
<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>
推荐阅读
- python - 为表 Python Flask 中的每个行 ID 创建锚 ID
- python - 马拉地语语料库上的 Wordcloud
- python-3.x - kivyMD 获取列表项中每个按钮的 ID
- javascript - 应用滤镜后如何下载图像?
- c++ - 光线追踪 | 具有多个光源的漫反射阴影会在 90 度处产生奇怪的阴影
- reactjs - 如何有条件地导入图像
- python - 在python中拆分没有Split()函数的列表
- php - 如何在内爆时排除特定值
- visual-studio-code - 如何在 VSCode Remix 的编译器配置中设置优化?
- amazon-web-services - ACM 中缺少中间证书