div class="list-group" 在 bootstrap4 上不起作用答案

【问题标题】：div class="list-group" is not working on bootstrap4div class="list-group" 在 bootstrap4 上不起作用
【发布时间】：2021-08-20 12:36:37
【问题描述】：

我一直在使用 bootstrap 4 的其中一个部分进行项目我想在行和行内显示图像我有列表组，它显示文件夹中的图像但是当图像显示 bootstrap 4 时，大小太大，但是如果我将我的引导程序版本切换到 3.3.7 图像正确显示而不会过大（原始尺寸）。那么这是否意味着引导程序 4 不再支持列表组？还是我错过了什么是我的代码。

当使用 bootstrap 4 时，上面的图片是全尺寸的。

我的引导程序 4 中的代码

<section id="gallery">

<div class="container">

        <h3>Images Gallery</h3>
           <div class="row">
<div class="list-group galleryy">


            @if($images->count())
                @foreach($images as $image)
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="/images/{{ $image->image }}">
                        <img class="img-responsive" alt="" src="/images/{{ $image->image }}" />
                        <div class='text-center'>
                            <small class='text-muted'>{{ $image->title }}</small>
                        </div> <!-- text-center / end -->
                    </a>
                   
                </div> 
                @endforeach
            @endif
    
        </div> 
    </div> 
</div>

工作引导

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

不工作

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

【问题讨论】：

标签： html css laravel bootstrap-4 twitter-bootstrap-3

【解决方案1】：

如果你使用bootstarp 4，那么代码结构应该是这样的：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <section id="gallery">
        <div class="container">
            <h3>Images Gallery</h3>
            <div class="row">
                @if($images->count())
                    @foreach($images as $image)
                    <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                        <div class="list-group galleryy">
                            <a class="thumbnail fancybox" rel="ligthbox" href="/images/{{ $image->image }}">
                                <img class="img-fluid" alt="" src="/images/{{ $image->image }}" />
                                <div class='text-center'>
                                    <small class='text-muted'>{{ $image->title }}</small>
                                </div> <!-- text-center / end -->
                            </a>
                       
                        </div> 
                    </div> 
                    @endforeach
                @endif
            </div> 
        </div> 
    </div>

有关“列表组”的更多信息。请查看以下链接：

https://getbootstrap.com/docs/4.6/components/list-group/

【讨论】：