【发布时间】：2020-03-02 10:45:25
【问题描述】：
我正在尝试使用此代码 https://codepen.io/Navedkhan012/pen/owdxWg 使用 bootstrap 4 在我的 codeigniter 网站中显示图像。您可以看到上面演示中的所有图像都水平显示，但在我的上面的代码中，垂直显示如下图所示。
我的模态代码如下所示，我正在尝试使用它。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" sytle ="background-color:black;">
<div class="container">
<div class="row">
<div class='list-group gallery'>
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
</div> <!-- list-group / end -->
</div> <!-- row / end -->
</div> <!-- container / end -->
</div>
<!-- Modal body End-->
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//FANCYBOX
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
如果有人可以纠正我，请告诉我。谢谢！
【问题讨论】：
-
它只是上面显示的 html，css 和 js 呢？你也这样做了吗？
-
@Kevin 我在 codepen 中也使用了相同的 css 和 js 代码。谢谢！
-
@Kevin 我已经添加了 js 和 css 代码以及编辑问题。谢谢！
标签： php html bootstrap-4