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; 对此。