Bootstrap Modal + Carousel Gallery沒有顯示圖片

Question

我在HTML文件中集成了Bootstrap Modal + Carousel Gallery，但以某種方式單擊縮略圖時，模態圖像不會出現。

這是我的代碼。

 <!--Bootstrap--> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!--Latest stable release of jQuery Core Library--> <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> <!--Bootstrap JS--> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> <ul class="list-inline"> <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br> Caption</a></li> <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br> Caption</a></li> <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br> Caption</a></li> <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="3"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/4"><br> Caption</a></li> <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="4"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/5"><br> Caption</a></li> <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="5"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/6"><br> Caption</a></li> <!--end of thumbnails--> </ul> <!--begin modal window--> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="pull-left">My Gallery Title</div> <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button> </div> <div class="modal-body"> <!--CAROUSEL CODE GOES HERE--> <!--begin carousel--> <div id="myGallery" class="carousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <img src="https://placeimg.com/600/400/nature/1" alt="item0"> <div class="carousel-caption"> <h3>Heading 3</h3> <p>Slide 0 description.</p> </div> </div> <div class="item"> <img src="https://placeimg.com/600/400/nature/2" alt="item1"> <div class="carousel-caption"> <h3>Heading 3</h3> <p>Slide 1 description.</p> </div> </div> <div class="item"> <img src="https://placeimg.com/600/400/nature/3" alt="item2"> <div class="carousel-caption"> <h3>Heading 3</h3> <p>Slide 2 description.</p> </div> </div> <div class="item"> <img src="https://placeimg.com/600/400/nature/4" alt="item3"> <div class="carousel-caption"> <h3>Heading 3</h3> <p>Slide 3 description.</p> </div> </div> <div class="item"> <img src="https://placeimg.com/600/400/nature/5" alt="item4"> <div class="carousel-caption"> <h3>Heading 3</h3> <p>Slide 4 description.</p> </div> </div> <div class="item"> <img src="https://placeimg.com/600/400/nature/6" alt="item5"> <div class="carousel-caption"> <h3>Heading 3</h3> <p>Slide 5 description.</p> </div> </div> <!--end carousel-inner--></div> <!--Begin Previous and Next buttons--> <a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a> <!--end carousel--></div> <!--end modal-body--></div> <div class="modal-footer"> <div class="pull-left"> <small>Photographs by <a href="https://placeimg.com" target="new">placeimg.com</a></small> </div> <button class="btn-sm close" type="button" data-dismiss="modal">Close</button> <!--end modal-footer--></div> <!--end modal-content--></div> <!--end modal-dialoge--></div> <!--end myModal-->></div> 

這是我復制步驟的參考。 這里

我可以共享頁面文件，但問題是，為什么會遇到此類問題？ 我將不勝感激，我可以從任何人這里獲得所有幫助！

Answer 1

主要問題是滑塊腳本之間的沖突。

關於CSS溢出：

只需在.project-content類中啟用height: 450px並添加overflow-y: auto; 對此。