Question

当我的基于模态的自举旋转木马在771px和993px之间被观察时，它变得非常小并且具有巨大的左右边距。

在所有其他尺寸下，它会按比例缩小，前后箭头的边距恰好足够。

有关原因的任何见解？

＆＃13;

/* 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");
});

＆＃13;

@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;
}

＆＃13;

<!-- #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>

＆＃13;

Answer 1

我想这是因为<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>

为什么我的自举流体转盘在771px和993px宽之间观察时变得如此之小

1 个答案: