Ejs个人资料卡格式

Question

我正在尝试修复此项目的格式。

我想要从数据输入（服务器）创建“for each”卡片，让它们排成一排。这确保我每行有三张卡片。但是我现在的代码通过每行只有一个配置文件卡来保持格式错误。它恰好居中。

<%- include('partials/header') %>
<div class="row">
<div class="card col-lg-4 col-md-6">
  <%  items.forEach(function(items){ %>


  <img alt="John" style="width:100%" src="data:image/<%=items.img.contentType%>;base64,
                     <%=items.img.data.toString('base64')%>"> 
  <h6><%=items.name%></h6>
  <h6><%=items.dob%></h6>
    <h6><%=items.breed%></h6>
       <h6><%=items.details%></h6>

  <p><button>Contact</button></p>

        <% }) %>


  </div>
</div>



  <%- include('partials/footer') %>

Answer 1

您需要在循环中嵌套 .card 元素

<%- include('partials/header') %>
<div class="row">
  <% items.forEach(function(items){ %>
    <div class="card col-lg-4 col-md-6">
  
      <img alt="John" style="width:100%" src="data:image/<%=items.img.contentType%>;base64,
                           <%=items.img.data.toString('base64')%>">
      <h6><%=items.name%></h6>
      <h6><%=items.dob%></h6>
      <h6><%=items.breed%></h6>
      <h6><%=items.details%></h6>
  
      <p><button>Contact</button></p>
  
    </div>
  <% }) %>
</div>

<%- include('partials/footer') %>

Ejs个人资料卡格式

Ejs Profile card formatting

html

javascript

ejs

node.js

bootstrap-4