为什么这个模板文字在单独的行中返回所有列？

Question

我在前端使用 Bootstrap 4 和一个简单的模板文字来传递我的字符串。它将列输出到各自的行中，我不明白为什么。

const bodList = [
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  },
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  },
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  }
];

function bodTemplate(bod) {
  return `
    <div class="col-md-4 col-lg-3">
      <div class="card border-0">
        <img src="${bod.image}" class="card-img-top" alt="${bod.name}">
        <div class="card-body pl-0">
          <h5 class="card-title"><a href="${bod.profile}">${bod.name}</a> <span class="text-right">${bod.termExp}</span></h5>
          <h6 class="card-title">${bod.title}</h6>
          <h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
        </div>
      </div>
    </div>
  `;
}

document.getElementById("boardDirectors").innerHTML = `
  ${bodList.map(bodTemplate).join(" ")}
`;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<div class="container-fluid">
  <div class="row no-gutters">
    <div id="boardDirectors"></div>        
  </div>
</div>

Answer 1

这与模板文字无关。 CSS 相关。

尝试在上面的 div 中添加您的 ID：

<div id="boardDirectors" class="row no-gutters">

并删除旧的。这应该可以解决您的问题。

<div class="container-fluid">
  <div id="boardDirectors" class="row no-gutters"></div>
</div>

Answer 2

这是一个 bootstrap / CSS 问题，而是与您使用模板文字这一事实相关的任何问题。

似乎通过在 row div 和 col div 之间添加一个额外的 <div>，您破坏了link 在这两者之间（至少在 bootstrap 看来），因此它不会将这些列视为列。我没有检查来源，但我猜这与 CSS 规则的定义方式有关，也许需要严格的层次结构。

无论如何，简单的解决方案是删除 div 并将 id="boardDirectors 属性移动到行 div.

我还删除了 no-gutters class 以阻止图像彼此相邻 - 现在它允许它们之间有一些 space。

const bodList = [
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  },
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  },
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  }
];

function bodTemplate(bod) {
  return `
    <div class="col-md-4 col-lg-3">
      <div class="card border-0">
        <img src="${bod.image}" class="card-img-top" alt="${bod.name}">
        <div class="card-body pl-0">
          <h5 class="card-title"><a href="${bod.profile}">${bod.name}</a> <span class="text-right">${bod.termExp}</span></h5>
          <h6 class="card-title">${bod.title}</h6>
          <h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
        </div>
      </div>
    </div>
  `;
}

document.getElementById("boardDirectors").innerHTML = `
  ${bodList.map(bodTemplate).join(" ")}
`;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<div class="container-fluid">
  <div class="row" id="boardDirectors">
  </div>
</div>

为什么这个模板文字在单独的行中返回所有列？

Why is this template literal returning all columns in separate rows?

javascript

css

template-literals

bootstrap-4