Laravel 循环损坏的设计

Question

我有默认模板，如下所示

当我添加循环时，它会变成这样

问题

正如您在第二张图片中看到的，填充和边距与默认的不同，但 html 输出看起来不错

这是代码

<div class="col-md-5 col-xs-12 pad-l">
    <div class="row">
        @foreach($featuresTwo as $featuret)
            @if($loop->first)
                <div class="col-sm-12">
                    <div class="post-overaly-style hot-post-top clearfix">
                        <div class="post-thumb">
                            <a href="#">
                                <img class="img-fluid" src="theme/images/news/tech/gadget2.jpg" alt="" />
                            </a>
                        </div>
                        <div class="post-content">
                            <a class="post-cat" href="#">
                                @foreach($featuret->categories as $categoryt)
                                {{ $loop->first ? ' ' : ', ' }}
                                {{$categoryt->title}}
                                @endforeach
                            </a>
                            <h2 class="post-title title-large">
                                <a href="#">{{$featuret->title}}</a>
                            </h2>
                        </div><!-- Post content end -->
                    </div><!-- Post Overaly end -->
                </div><!-- Col end -->
            @else
                <div class="col-sm-6 pad-r-small">
                    <div class="post-overaly-style hot-post-bottom clearfix">
                        <div class="post-thumb">
                            <a href="#"><img class="img-fluid" src="theme/images/news/lifestyle/travel2.jpg" alt="" /></a>
                        </div>
                        <div class="post-content">
                            <a class="post-cat" href="#">
                                @foreach($featuret->categories as $categoryt)
                                    {{ $loop->first ? ' ' : ', ' }}
                                    {{$categoryt->title}}
                                @endforeach
                            </a>
                            <h2 class="post-title title-medium">
                                <a href="#">{{$featuret->title}}</a>
                            </h2>
                        </div><!-- Post content end -->
                    </div><!-- Post Overaly end -->
                </div><!-- Col end -->
            @endif
        @endforeach
    </div>
</div><!-- Col 5 end -->

问题

我哪里出错了？如何解决？

谢谢。

更新

没有循环的原始html

<div class="col-md-5 col-xs-12 pad-l">
    <div class="row">
        <div class="col-sm-12">
        <div class="post-overaly-style hot-post-top clearfix">
            <div class="post-thumb">
                <a href="#">
                    <img class="img-fluid" src="images/news/tech/gadget2.jpg" alt="" />
                </a>
            </div>
            <div class="post-content">
                <a class="post-cat" href="#">Gadget</a>
                <h2 class="post-title title-large">
                    <a href="#">Samsung Gear S3 review: A whimper, when smartwatches need a bang</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->

        <div class="col-sm-6 pad-r-small">
        <div class="post-overaly-style hot-post-bottom clearfix">
            <div class="post-thumb">
                <a href="#"><img class="img-fluid" src="images/news/lifestyle/travel2.jpg" alt="" /></a>
            </div>
            <div class="post-content">
                <a class="post-cat" href="#">Travel</a>
                <h2 class="post-title title-medium">
                    <a href="#">Early tourists choices to the sea of Maldiv…</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->

        <div class="col-sm-6 pad-l-small">
        <div class="post-overaly-style hot-post-bottom clearfix">
            <div class="post-thumb">
                <a href="#"><img class="img-fluid" src="images/news/lifestyle/health1.jpg" alt="" /></a>
            </div>
            <div class="post-content">
                <a class="post-cat" href="#">Health</a>
                <h2 class="post-title title-medium">
                    <a href="#">That wearable on your wrist could soon...</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->
    </div>
</div><!-- Col 5 end -->

...................................................... ...................................................... ………………

Answer 1

两个半宽列的原始代码如下:

 <div class="col-sm-6 pad-r-small">

还有这样的一个:

<div class="col-sm-6 pad-l-small">

但是您已经使用循环创建了两个相同的内容，如下所示:

<div class="col-sm-6 pad-r-small">

您可能应该只在 $featuresTwo 数组中键入功能并删除循环，以便可以准确地复制代码。