HTML проблемы при попытке визуализации столбцов

Question

Не уверен, почему мои мои продукты такие. Они вышли из строя, смещены и выглядят безобразно. Проект находится в начальной загрузке 3. Вот изображение того, как это выглядит:

Код ниже в частичном

<% products.each do |product| %>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading preview">
                <%= image_tag product.cover_photo(:medium) %>
            </div>
            <div class="panel-body">
                <%= link_to product.name, product %><br/>
                $<%= product.price %> - <%= product.weight %><br/>
                <%= product.strain_type %><br/>
                <%= product.product_type %><br/>
                <span style="color: red;">THC: <%= product.percentage %>%</span>
            </div>
        </div>
    </div>

    <script>
    $('#star_<%= product.id %>').raty({
        path: '/assets',
        readOnly: true,
        score: <%= product.average_rating %>
      });
</script>
<% end %>

Answer 1

Установите фиксированную высоту для вашей панели

.panel-default {
   height: 200px; /* sample height */
}

Это выглядит так из-за неравной высоты