Ejs 个人资料卡格式答案

【问题标题】：Ejs Profile card formattingEjs 个人资料卡格式
【发布时间】：2021-07-19 11:17:27
【问题描述】：

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

我想从数据输入（服务器）创建“每个”卡片，让它们成行排列。这确保我每行有三张卡片。但是我现在的代码由于每行只有一张个人资料卡而导致格式错误。 WH其恰好以奇怪的方式居中。

<%- 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') %>

【问题讨论】：

标签： javascript html node.js bootstrap-4 ejs

【解决方案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') %>

【讨论】：

试过了。他们正在互相堆叠。并且对于每个新项目，其宽度会减小，但仍会堆叠。这是我的 CSS .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);最大宽度：400px；边距：自动；边距底部：20px；文本对齐：居中； }
您是否还确保div.card 的结束标记在循环内？如果它们随着您的使用而变得更瘦，则表明每个新的都在前一个内。