使用数据库中的内容在引导程序中使可变数量的缩略图具有相同的高度

时间:2018-07-25 06:56:55

标签: css ejs

Screenshot of Page我正在尝试使用引导和表达方式重新创建PC零件选择器类型的应用程序。当试图显示“我的”网站上可用的所有案例时,我将从数据库中的所有案例加载到一个ejs文件中,然后以缩略图形式显示它们,每行四个。我在每四个元素上都使用了flexbox,以使一行中所有缩略图的高度都相同,但是它仅在第一行有效,而在第二行之后无效。我试图在下面添加代码,但这是我第一次问一个问题,因此,如果您有任何建议使其更具可读性,请告诉我。在段落的开头,我还包含了指向页面图片的链接。

    <% var start = 0 %>
    <% cases.forEach(function(qcase) { %>
        <% if (start % 4 == 0) { %>
            <div class="row text-center display-flex">
        <% }; %>
            <div class="col-md-3 col-md-6">
            <div class="thumbnail">
                <img src="<%=qcase.image%>">
                <div class="caption">
                    <h4><%=qcase.name%></h4>
                </div>
                <div>
                    <a href="/cases/<%=qcase.id%>" class="btn btn-primary">More Information</a>
                </div>
            </div>
            </div>
        <% if (start % 4 == 3) { %>
            </div> 
        <% }; %>  
            <% start += 1 %>  
    <% }); %>

0 个答案:

没有答案