时间戳

首页 > 解决方案 > 自举两列错位

css - 自举两列错位

问题描述

我正在尝试创建一个简单的两列布局，但由于某种原因，一些单元格被跳过了。（见：https ://imgur.com/a/FE2ZwKY ）。我正在使用 Laravel 使用 foreach 循环从数据库中获取产品。一种产品的代码如下所示：

<div class="col-md-6 mt-4">
<div class="card">
    <img src="{{asset('storage/app/public/cover_images/'.$product->cover_image)}}" class="img-fluid" alt="">
    <div class="card-content">
        <div class="row">
            <div class="col-md-6">
                <h6 class="text-center">ROMÂNĂ</h6>
                <h4 class="mt-4 text-center">
                    <b>{{$product->name_ro}}</b></h4>
                <p>{{$product->desc_ro}}</p>
            </div>
            <div class="col-md-6">
                <h6 class="text-center">ENGLISH</h6>
                <h4 class="mt-4 text-center">
                    <b>{{$product->name_en}}</b></h4>
                <p>{{$product->desc_en}}</p>
            </div>
        </div>
        <h5 class="text-center">Pret: <b>{{$product->price}}</b>
        </h5>
        <hr>
        <div class="button-wrapper">
            <a href="{{url('/products/'.$product->id.'/edit/')}}">
                <button type="submit" class="btn btn-warning">Editeaza</button></a>
            <form action="{{ action('ProductsController@destroy', $product->id) }}" method="post">
                @csrf
                <input name="_method" type="hidden" value="DELETE">

                <button type="submit" class="btn btn-danger">Sterge</button>
            </form>
        </div>
    </div>
</div>

上面的代码是为每个产品生成的。欢迎任何帮助，谢谢！

标签： csstwitter-bootstrap-3

解决方案

一个问题可能是，您的<h4>文本并不总是相同的长度。头条正在推送内容，卡片正在接收不同的高度值。如果你为h4设置一个固定的高度，你的问题可能就解决了。

推荐阅读