如何在父元素中嵌入EJS循环？附Bootstrap卡片模板示例

首先，我注意到你原代码里有几个小问题（比如提前闭合了card-body、card-text代码截断），这会导致HTML结构混乱，Bootstrap的样式也不会正常生效。下面是修复后的完整代码，同时保证EJS循环正确嵌入到父容器中：

<div class="container mt-4">
  <% blogs.forEach(function(blog) { %>
    <!-- 可选：用Bootstrap网格实现响应式布局，每个卡片占1/3宽度 -->
    <div class="col-md-4 mb-4">
      <div class="card h-100">
        <!-- 卡片顶部图片 -->
        <img class="card-img-top" src="<%= blog.image %>" alt="Blog post image">
        <!-- 卡片内容区域 -->
        <div class="card-body">
          <h5 class="card-title"><%= blog.title %></h5>
          <p class="text-muted small"><%= blog.created %></p>
          <p class="card-text"><%= blog.content %></p>
          <!-- 可选：添加跳转按钮 -->
          <a href="/blogs/<%= blog.id %>" class="btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
  <% }) %>
</div>

关键注意事项： #

• 循环的位置：blogs.forEach循环要完全放在父容器（.container）内部，这样所有生成的卡片都会被包裹在容器里，符合Bootstrap的布局规范。
• HTML结构完整性：确保card-body包含所有卡片的文本内容（标题、日期、正文），不要提前闭合标签——原代码里你把card-body空着闭合了，导致标题跑到了卡片内容区域外面，这是错误的。
• EJS语法正确：用<% %>包裹循环逻辑（不输出内容），用<%= %>输出变量值（比如blog.title、blog.image），确保变量能正确渲染到页面上。
• 响应式优化（可选）：把每个卡片放在.col-md-4里，配合Bootstrap的网格系统，在中等屏幕及以上每行显示3个卡片，小屏幕自动堆叠，提升移动端体验。
• 标签闭合：所有HTML标签都要正确闭合，包括EJS循环结束的<% }) %>，避免出现语法错误。

这样写出来的代码不仅能正确遍历你的博客数组生成卡片，还能保证Bootstrap样式正常生效，页面结构清晰。

内容的提问来源于stack exchange，提问作者Denis B