这是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列/行,但是什么也没有,它们保留为列而不是行
您每次都附加.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>
预览