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

Posted 2023-03-05

【中文标题】div class="list-group" 在 bootstrap4 上不起作用

【英文标题】：div class="list-group" is not working on 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"  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">

【参考方案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"  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/