Question

我已将我的bootstrap 3升级到4，我在网格显示中遇到的问题很少。我和Laravel 5.4一起使用nmp和gulp。我很确定css和js包括原因如果删除链接我有js错误或我的样式页面更改。但我有一个简单的页面只有col-md-4，它没有正确显示它（laraval auth菜单也被打破了，其他col，但我认为这是同样的问题）。

我的代码：

    <div class="container">      
        @foreach ($products as $product)
            <div class="col-md-3">
                <div class="product">
                    <a href="{{ route('app.products.show', $product->slug) }}">
                        {{ $product->name }}
                    </a>
                </div>
            </div>    
        @endforeach
    </div>

但它不起作用，如：

产品1

产品2

产品3

产品4

而不是

产品1产品2产品3

产品4

我尝试在容器之后和foreach之前使用一行，它现在正在工作，但它是假的（我认为）因为我的产品显示在多行。

有人知道为什么吗？它适用于Bootstrap 3

Answer 1

我认为bootstrap 4要求您添加<div class="row">作为列的父级，因为重新设置了列功能（因为它们添加了灵活的列大小）但不确定。

但是如果你说它适用于行父，那么你为什么不使用它呢？

Answer 2

您可以使用的是chunk，每个{3}并在row上进行迭代。

<div class="container">

    @foreach ($products->chunk(3) as $chunk)
        <div class="row">
            @foreach ($chunk as $product)
                <div class="col-md-4">
                    <div class="product">
                        <a href="{{ route('app.products.show', $product->slug) }}">
                            {{ $product->name }}
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    @endforeach

</div>

有关Laravel collection chunk

的更多信息

希望它有用。

Bootstrap 4 - 用laravel打破的网格

2 个答案: