当我在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;
  }
}


因此,当屏幕宽度在600px768px之间时,此块的宽度变为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>

09-18 19:31