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

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 问题，而不是与您使用模板文字有关的任何问题。

看来，通过在 row div 和 col div 之间添加一个额外的 <div>，您已经断开了这两者之间的联系（至少在 bootstrap 看来），所以它不会将这些列视为列。我没有检查源代码，但我猜它与 CSS 规则的定义方式有关，可能需要严格的层次结构。

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

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

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>

Answer 2

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

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

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

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

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