我试图创建一个嵌入了“幻灯片”的 Bootstrap 卡片。我想使用另一页提供有关第一页的更多信息。我在网络上编辑它并获得了一个相当漂亮的产品(https://gph.is/2NgOkWh)但是当我在我的手机上尝试它时它完全坏了。
我附上了主要代码,省略了库链接和其他一些默认信息。 请告诉我如何更正此问题,我将不胜感激。
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="card text-white bg-dark mb-3" style="width: 18rem; height:24rem">
<div class="card-header text-muted">
App name
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="card-body">
<!---------------------CARD BODY--------------------->
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner" style="height:15.2rem">
<div class="carousel-item active">
<img class="card-img-top" src="sample.jpg"
alt="Card image cap"
id="sample">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Hi quick example text to build on the card title and make up
the bulk of the card's content.</p>
</div>
<div class="carousel-item">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text trewrwrwerwerwero build on the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!---------------------CARD BODY END--------------------->
</div>
</div>
<div class="card-footer btn btn-primary">
Show me!
</div>
</div>
</div>
</div>
最佳答案
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="card text-white bg-dark mb-3" ">
<div class="card-header text-muted">
App name
</div>
<div class="card-body">
<div id="demo" class="carousel slide" data-ride="carousel">
<!---------------------CARD BODY--------------------->
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner" >
<div class="carousel-item active">
<img class="card-img-top" src="sample.jpg"
alt="Card image cap"
id="sample">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Hi quick example text to build on the card title and make up
the bulk of the card's content.</p>
</div>
<div class="carousel-item">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text trewrwrwerwerwero build on the card
title and make up
the bulk of the card's content.</p>
</div>
<!---------------------CARD BODY END--------------------->
</div>
</div>
<div class="card-footer btn btn-primary">
Show me!
</div>
</div>
</div>
</div>
关于javascript - 如何使用 Bootstrap 创建响应式轮播嵌入式卡片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52601592/