html 如何< div>在for循环中相邻显示？(laravel)

cyej8jka 于 2022-12-02 发布在其他

关注(0)|答案(2)|浏览(154)

我正在一个校友门户网站上工作，我需要显示委员会成员的详细信息。我需要在一行中打印4个成员，在下一行中打印下4个成员。任何解决方案都会有帮助。

<h2>Member Details</h2>
    <div class="jumbotron container">
        <div class="pull-right">
            <a class="btn btn-primary" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="Add Institute Details"> <i class="fas fa-plus-circle"></i>
            </a>
        </div>
        
        <div class="container main" id="wrapper"> 
                @foreach ($members as $member)
                    <div class="img-box">
                        <pre>
                        <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
                        &nbsp; &nbsp; &nbsp; {{ $member->id }}<br/>
                        <a> &nbsp;  {{ $member->name }}</a>
                        
                        <!-- @if(($member->id) >=5 )
                        <span style="white-space: pre-line">
                        </span> 
                        @endif
                        </pre> -->
                    </div>
                @endforeach
        </div>
    </div>

Html

来源：https://stackoverflow.com/questions/74637645/how-to-display-div-next-to-each-other-within-a-for-looplaravel

2条答案

按热度按时间

nzkunb0c1#

如果使用Bootstrap，请尝试以下操作

<div class="row">
  @foreach ($members as $member)
    <div class="col-md-3">
      <div class="img-box">
        <pre>
         <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
       &nbsp; &nbsp; &nbsp; {{ $member->id }}<br/>
         <a> &nbsp;  {{ $member->name }}</a>
        </pre>
      </div>
    </div>
  @endforeach
</div>

赞(0）回复(0）举报 2022-12-02

bqf10yzr2#

添加“显示：网格;“添加到容器“div”标记中。您需要定义该属性。

赞(0）回复(0）举报 2022-12-02