javascript - 动态创建 bootstrap 4 张卡片显示为一列而不是正常布局(行)

Question

这是js:

const url = 'https://jsonplaceholder.typicode.com/todos?_limit=3';

async function getDataFromCinemasAPI() {
    const response = await fetch(url);
    const data = await response.json();

    let cardContentForFilling = '<div class="container"><div class="d-flex flex-row"><div class="d-flex flex-col-md-4"><div class="card mb-4 box-shadow"><div class="card-body"><p class="card-text"> </p></div></div></div></div></div>';

    for (let i = 0; i < data.length; i++) {
        $('.album.py-5').append(cardContentForFilling);
        let cards = $('.card-text');
        cards.eq(i).html((data[i]["title"]));
    } 
}

getDataFromCinemasAPI();

这是 html:

<div class="album py-5">

</div>

已经尝试过使用 flex column/rows 但没有，它们仍然是列而不是行

here's the jsfiddle

Answer 1

您每次都在附加 .container。你必须把它们放在上面。这样的事情可能会起作用:

const url = 'https://jsonplaceholder.typicode.com/todos?_limit=3';

async function getDataFromCinemasAPI() {
  const response = await fetch(url);
  const data = await response.json();

  let cardContentForFilling = '<div class="d-flex flex-col-md-4"><div class="card mb-4 box-shadow"><div class="card-body"><p class="card-text"> </p></div></div></div>';

  for (let i = 0; i < data.length; i++) {
    $('.append-here').append(cardContentForFilling);
    let cards = $('.card-text');
    cards.eq(i).html((data[i]["title"]));
  }
}

getDataFromCinemasAPI();

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="album py-5">
  <div class="container">
    <div class="d-flex flex-row append-here">
      
    </div>
  </div>
</div>

预览