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 数组中的功能并删除循环，这样您就可以准确地复制代码。

Answer 2

已解决

基于wheelmaker 的回答，我得到了想法，并在@else 之后更改了我的 div

@if($loop->last)
  <div class="col-sm-6 pad-l-small">
@else
  <div class="col-sm-6 pad-r-small">
@endif

这解决了样式问题。

PS：我接受wheelmaker 的回答是因为他让我意识到 问题。