Javascript 如何使用Api调用上的引导创建3 X 3（列X行）的库

使用Bootstrap for UI并调用api以在3X3[Col X Row]中显示图像 使用javascript异步等待。 但在柱中获得3个图像，而不是3 X 3网格布局

它可以使用网格列，也可以在Bootstrap4中使用Flex

我正在使用DogAPI进行原型设计，用于演示

点击按钮，它将在引导中显示网格布局上的前15个图像

没有得到正确的结果，下面的图1是我得到的输出。 图1

但它应该显示为Image2，并在网格中显示不同的图像 图2

const-API\u-URL=”https://dog.ceo/api/breeds/image/random/20';
const randomImgDogs=document.querySelector（'.random dogs'）；
const loadingImg=document.querySelector（'.loading'）；
const getButton=document.querySelector（'.getRandomDog'）；
loadingImg.style.display='none'；
异步函数getRandomDogs（）{
randomImgDogs.innerHTML=''；
加载img.style.display=''；
const response=wait fetch（API_URL）；
const json=await response.json（）；
log（json.message）；
json.message.forEach（dogImage=>{
randomImgDogs.innerHTML+=`
`;
});
loadingImg.style.display='none'；
}
getButton.addEventListener（'click'，getRandomDogs）
img{
保证金：5px；
}
.柔性柱{
最大宽度：260px；
}
svg{
字体大小：30px；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
}

随机狗
单击“获取”以查看一些随机狗图像
加载。。。
您正在循环整个容器，而不是项目本身

正在循环的整个容器：

<div class="container-fluid">
   <div class="d-flex flex-row flex-wrap justify-content-center">
       <div class="d-flex flex-column"> <!-- what you should loop. i.e duplicate  -->
           <img src="${dogImage}" class="img-fluid">
       </div>
   </div>
</div>



您应该循环（项目）的内容：



您可以将代码重构为以下代码：


async function getRandomDogs() {
  const createParentContainer = children => (
    `<div class="container-fluid">
        <div class="d-flex flex-row flex-wrap justify-content-center">
         ${children}
        </div>
     </div>`
  );
  randomImgDogs.innerHTML = '';
  loadingImg.style.display = '';
  const response = await fetch(API_URL);
  const json = await response.json();
  console.log(json.message);
  const children = '';
  json.message.forEach((dogImage) => {
    children += `<div class="d-flex flex-column">
                    <img src="${dogImage}" class="img-fluid">
                </div>`;
  });
  randomImgDogs.innerHTML += createParentContainer(children);
  loadingImg.style.display = 'none';
}


异步函数getRandomDogs（）{
const createParentContainer=children=>(
`
${children}
`
);
randomImgDogs.innerHTML=''；
加载img.style.display=''；
const response=wait fetch（API_URL）；
const json=await response.json（）；
log（json.message）；
const children=''；
json.message.forEach（（dogImage）=>{
儿童+=`
`;
});
randomImgDogs.innerHTML+=createParentContainer（子级）；
loadingImg.style.display='none'；
}
数据传输与浏览器中的显示有什么关系？您有一个
n
元素列表（该列表来自何处并不重要），这些元素应以3x3的网格排列。“我想这只是一个CSS（+标记）问题。@Andreas。我尝试在所有3X3网格中获得重叠或相同的图像，否则它将不会用不同的图像显示图像3X3网格。在Advanced@akolliy中感谢，但它不会在网格布局[3X3]中显示。它仅以直线显示图像或获得重叠

async function getRandomDogs() {
  const createParentContainer = children => (
    `<div class="container-fluid">
        <div class="d-flex flex-row flex-wrap justify-content-center">
         ${children}
        </div>
     </div>`
  );
  randomImgDogs.innerHTML = '';
  loadingImg.style.display = '';
  const response = await fetch(API_URL);
  const json = await response.json();
  console.log(json.message);
  const children = '';
  json.message.forEach((dogImage) => {
    children += `<div class="d-flex flex-column">
                    <img src="${dogImage}" class="img-fluid">
                </div>`;
  });
  randomImgDogs.innerHTML += createParentContainer(children);
  loadingImg.style.display = 'none';
}