Bootstrap смещение двух столбцов - PullRequest
Новая
       20

Bootstrap смещение двух столбцов

0 голосов
/ 24 февраля 2020

Я пытаюсь создать простой макет из двух столбцов, но по некоторым причинам некоторые ячейки пропускаются. (см .: https://imgur.com/a/FE2ZwKY). Я использую Laravel, чтобы получить продукты из БД, используя foreach l oop. Код для одного продукта выглядит следующим образом: 

<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>

Код выше генерируется для каждого продукта, который существует. Любая помощь приветствуется, спасибо!

1 Ответ

1 голос
/ 25 февраля 2020

проблема может быть в том, что ваш текст <h4> не всегда имеет одинаковую длину. Заголовки выдвигают контент, а карточки получают разные значения высоты. Если вы установите фиксированную высоту для h4, ваша проблема может быть решена.

...