Question

我需要为自己的帖子创建索引视图，然后为此选择图片库。在我的控制器中，我将paginate设置为10。不幸的是，我的列在水平方向上被一整除：{{ 3}}。我想把它分为2列，每列5个项目。您能帮我一点忙吗？谢谢。

我的观点

 <!-- Promo Block -->
      <div class="container g-pt-100 g-pb-70">
        <!-- News Section -->
        <div class="u-heading-v3-1 g-mb-30">
          <h2 class="h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Latest News</h2>
        </div>
@foreach($posts as $post)

         <div class="masonry-grid-item col-sm-6 g-mb-30">
                <!-- Blog Background Overlay Blocks -->
                <article class="u-block-hover">
                  <div class="g-bg-cover g-bg-white-gradient-opacity-v1--after">
                    <img class="d-flex align-items-end u-block-hover__main--mover-down" src="/storage/{{ $post->image }}" alt="Image Description">
                  </div>
                  <div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
                    <div class="u-block-hover__visible g-pa-25">
                       @foreach($post->tags as $tag) 
                      <span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $tag->name }}</span>
                      <span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>

                      @endforeach
                      <h2 class="h4 g-color-white g-font-weight-600 mb-3">
                          <a class="u-link-v5 g-color-white g-color-primary--hover g-cursor-pointer" href="/post/{{ $post->id }}">{{ $post->caption }}</a>
                        </h2>
                      <h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
                          By,
                          <a class="g-color-white-opacity-0_7 text-uppercase" href="/post/{{ $post->id }}">{{ $post->user->username }}</a>
                        </h4>
                      <span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                      <span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->created_at->diffForHumans() }}</span>
                      <span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                      <span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->comments()->count() }} comments</span>
                    </div>

                    <a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="/post/{{ $post->id }}">Read more</a>
                  </div>
                </article>
                <!-- End Blog Background Overlay Blocks -->
              </div>
          @endforeach

           </div>
         </div>

        <!-- End News Section -->

Answer 1

像这样制作您的第一个foreach <div class="row"> Your foreach </div>

水平显示项目而不是列

1 个答案: