Bootstrap 4 - 网格被 laravel 破坏答案

【问题标题】：Bootstrap 4 - Grid broken with laravelBootstrap 4 - 网格被 laravel 破坏
【发布时间】：2018-02-23 03:36:36
【问题描述】：

我已将 bootstrap 3 升级到 4，但在网格显示中出现了一些问题。我使用 Laravel 5.4，我使用 nmp 和 gulp。如果删除链接我有 js 错误或我的样式页面更改，我很确定 css 和 js 是包含原因。但是我有一个只有 col-md-4 的简单页面，它不能正确显示（Laravel 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

【问题讨论】：

这行可能有问题
你可以使用 url() 方法 ....{{url('app.products.show')}}
@MirthfulNahid 谢谢，但事实并非如此。我将所有替换为像“Test”这样的简单文本，它没有任何改变。这只是产品页面的链接。

标签： twitter-bootstrap laravel grid bootstrap-4

【解决方案1】：

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

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

【讨论】：

它在这个页面上工作，但我有另一个页面和使用 col。就像在我使用 col-sm-1 使用删除/编辑按钮定义列的宽度的表上一样。而且它也不起作用。该表位于
中，我不明白为什么。我查看了 bootstrap 4 文档，它很有效。
您不能在表上使用col 类。这是因为表格单元格有一个display: table-cell 选项。在大小方面，它们的行为与普通 div 不同。但是调整表格单元格的大小不是您的问题。
我在上使用它。
这就是我的意思。表格中的任何内容：行、单元格和表格本身，都不能使用col 类进行样式设置。然后再次。这在您的问题中没有描述。你想让正常的行正常工作，你可以通过添加.row div 作为父级来做到这一点。