【问题标题】:How to create a row of 2 items retrieved from mysql database in laravel如何在laravel中创建从mysql数据库中检索到的一行2个项目
【发布时间】:2020-08-18 11:40:45
【问题描述】:

所以我正在处理我的投资组合页面。我将所有项目都输入了 mysql 数据库。我可以取回数据并将它们呈现到我网页上的单独行中,但我希望在网页的每一行中呈现两个项目(即在每个新行中呈现两个 mysql 行数据)。

我一直无法弄清楚如何做到这一点。

这是我的刀

@extends('layouts.master')
@section('content')

{{-- Search --}}
{{-- <div class="container">
        <div class="col-md-6 text-right">
                <form action=" {{ route('projects.postSearch') }} " method="get" class="form-inline">
                        <div class="input-group">
                        <input type="search" class="form-control" name="search" placeholder="search contacts">
                        </div>
                        <div class="input-group-prepend" style="margin-top:20px;">
                                <button class="btn btn-primary" type="submit">Search</button>
                        </div>
                </form>
        </div>
</div> --}}

{{-- All Projects --}}

<div class="containter">
    <div style="align-content: center; margin-left: 10%">
    @foreach ($projects as $key => $value)
        <div class="row" style="align-content:center">
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="row" style="align-items-center">
                    <h3 class="col">{{$value->projectName}}</h3>
                </div>
                <div class="row" style="align-items-center">
                    <div class="col"><a href="{{$value->url}}"><img src="assets/img/{{$value->img}}" style="width: 200%"></div>
                </div>
                <div class="row">
                        <p class="col">{{$value->description}}</p>
                        <p class="col">{{$value->keywords}}</p>
                        <a href="{{$value->github}}"><img src="{{asset('/assets/img/githublogo.gif')}}" style="width: 50%">
                </div>
            </div>
        </div>
        @endforeach
    </div>
    {{-- {{ $projects->links() }} --}}
</div>

@endsection

这是我的刀片控制器代码

    public function index()
    {
        $projects = Projects::orderBy('ranking')->paginate(10);
        return view('projects.index', ['projects' => $projects]);
    }

感谢您的帮助

【问题讨论】:

  • 您想每 2 个条目添加一个新的 &lt;div class="row" style="align-content:center"&gt;,对吗?
  • 我假设您使用的是引导程序?如果是这样,您使用的是什么版本的引导程序?另外,您能否解释一下当前列表是如何呈现的以及问题是什么?

标签: php mysql laravel for-loop foreach


【解决方案1】:

您可以通过 2 个元素 chunk 您的收藏来获得您想要实现的目标:

@foreach($projects->chunk(2) as $chunk)
    <div class="row" style="align-content:center">
        @foreach ($chunk as $key => $value)
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="row" style="align-items-center">
                    <h3 class="col">{{$value->projectName}}</h3>
                </div>
                <div class="row" style="align-items-center">
                    <div class="col"><a href="{{$value->url}}"><img src="assets/img/{{$value->img}}"
                                                                    style="width: 200%"></div>
                </div>
                <div class="row">
                    <p class="col">{{$value->description}}</p>
                    <p class="col">{{$value->keywords}}</p>
                    <a href="{{$value->github}}"><img src="{{asset('/assets/img/githublogo.gif')}}"
                                                      style="width: 50%"></a>
                </div>
            </div>
        @endforeach
    </div>
@endforeach

【讨论】:

  • 谢谢 效果很好!!!我现在将一直使用块,哈哈。这是我不知道的好消息。非常感谢!
【解决方案2】:

列必须存在于一行中:

<div class="row>
    <div class="col-md-6 text-right">
        <form action=" {{ route('projects.postSearch') }} " method="get" class="form-inline">
            <div class="input-group">
                <input type="search" class="form-control" name="search" placeholder="search contacts">
            </div>
            <div class="input-group-prepend" style="margin-top:20px;">
                <button class="btn btn-primary" type="submit">Search</button>
            </div>
        </form>
    </div>
</div>

【讨论】:

    猜你喜欢
    • 2013-08-26
    • 1970-01-01
    • 2016-12-14
    • 1970-01-01
    • 2021-02-18
    • 1970-01-01
    • 1970-01-01
    • 2023-03-19
    • 2015-12-03
    相关资源
    最近更新 更多