当我在771px和993px宽之间查看基于模态的自举轮播时,该轮播会变得非常小,并且左右边距很大。
在所有其他大小上,它仅按正向箭头和背景箭头的足够裕度按比例减小。
为什么有任何见解?
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function(){
$(".modal-title")
.html($(this)
.find(".active img")
.attr("title"));
});
/* when clicking a thumbnail */
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal //
$("#modal-gallery").modal("show");
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* modal full background opacity */
.modal-backdrop.in {
opacity: 0.8;
}
/* change opacity of modal border to match
modal background opacity */
.modal-content {
background-color: transparent;
}
/* arrow style */
.carousel-control.left,.carousel-control.right{
background-image:none;
width: auto;
opacity: 0.8;
}
/* arrow postition outside image */
.carousel {
padding-right: 20px;
padding-left: 20px;
}
<!-- #image-1 (row of images) -->
<div class="row">
<div class="col-md-4">
<a title="Image 4">
<a href="#" class="pop">
<img class="thumbnail img-responsive" id="image-4" src="images/powwow/powwow_04.jpg">
</a>
</a>
</div>
</div>
</div>
<div class="hidden" id="img-repo">
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="" src="images/powwow/powwow_01.jpg">
</div>
</div>
<!-- modal carousel gallery -->
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
最佳答案
我猜是因为<div class="modal-dialog modal-lg">
块。让我们探索bootstrap.css:
.modal-dialog {
width: auto;
margin: 10px;
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
因此,当屏幕宽度在
600px
和768px
之间时,此块的宽度变为991px
。但是您可以通过CSS重新定义此属性。例如:@media (min-width: 768px) and (max-width: 991px) {
.modal-lg {
width: 90%;
}
}
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function(){
$(".modal-title")
.html($(this)
.find(".active img")
.attr("title"));
});
/* when clicking a thumbnail */
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal //
$("#modal-gallery").modal("show");
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@media (min-width: 768px) and (max-width: 991px) {
.modal-lg {
width: 90%;
}
}
/* modal full background opacity */
.modal-backdrop.in {
opacity: 0.8;
}
/* change opacity of modal border to match
modal background opacity */
.modal-content {
background-color: transparent;
}
/* arrow style */
.carousel-control.left,.carousel-control.right{
background-image:none;
width: auto;
opacity: 0.8;
}
/* arrow postition outside image */
.carousel {
padding-right: 20px;
padding-left: 20px;
}
<!-- #image-1 (row of images) -->
<div class="row">
<div class="col-md-4">
<a title="Image 4">
<a href="#" class="pop">
<img class="thumbnail img-responsive" id="image-4" src="images/powwow/powwow_04.jpg">
</a>
</a>
</div>
</div>
</div>
<div class="hidden" id="img-repo">
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="" src="images/powwow/powwow_01.jpg">
</div>
</div>
<!-- modal carousel gallery -->
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>