【问题标题】:Laravel loop damaged designLaravel 循环损坏设计
【发布时间】:2019-03-14 20:28:07
【问题描述】:

我有默认模板,看起来像这样

当我添加我的循环时,它变成了这样

问题

正如您在第二张图片中看到的那样,填充和边距与默认值不同,但 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 -->

.................................................. ..................................................... .....................

【问题讨论】:

  • 你有没有没有循环的原始html进行比较?
  • @wheelmaker 同意,我会更新我的问题。
  • @wheelmaker 已更新

标签: laravel foreach laravel-blade


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

【讨论】:

  • 你当然可以跟踪你在循环中的位置并相应地更改类,但我认为这是一个过度复杂化的例子,以避免任何数量的重复,只会如果/当这些 div 需要进一步更改时,会变得更加复杂。
  • 谢谢伙计,我明白了,但我已经用其他方式完成了,现在已经修复了:-D
  • 接受了您的回答并发布了解决方案;)
【解决方案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 的回答是因为他让我意识到 问题。

【讨论】:

    猜你喜欢
    • 2016-07-29
    • 1970-01-01
    • 2014-09-02
    • 2017-03-09
    • 1970-01-01
    • 1970-01-01
    • 2015-10-24
    • 1970-01-01
    • 2014-07-20
    相关资源
    最近更新 更多