我正在尝试在不同的 View 中显示 Bootstrap 轮播。就像在桌面上显示时一样，它有 4 列，而在移动设备上显示时，它会显示 2 列。 这是我的代码。它是 4 列缩略图 View 。但是当我在移动 View 中看到它会显示下面的元素。我在谷歌上找到。我得到了这个https://www.codeply.com/go/PKto9ssn0W/bootstrap-4-carousel-with-thumbnail-navigation .但它不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">6</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
</body>
</html>
最佳答案
这将使用示例代码中的 col-xs-6 在移动设备上显示两列，在桌面设备上使用 col-md-4 显示 3 列。如果您想要在桌面上显示另一列，您需要做的就是将类从 col-md-4 更改为 col-md-3。
我还在 #myCarousel CSS 中添加了高度和溢出:隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
#myCarousel { height: 250px; overflow: hidden;
}
</style>
}
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-xs-6 col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">6</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
</body>
</html>
关于jquery - 这可能是 Bootstrap 轮播缩略图在桌面上显示 4 列，在移动设备上显示 2 列吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44985815/