提问人：Himansu Kumar Nayak 提问时间：11/16/2023 最后编辑：Mr. PolywhirlHimansu Kumar Nayak 更新时间：11/16/2023 访问量：39
Vanilla js bootstrap 布局问题
Vanilla js bootstrap layout issue
问：
我正在尝试从Pixabay api获取图像数据，我想显示编辑选择的图像。 问题出在布局上。我试图在每行中显示 3 或 4 张图像，但布局正在崩溃。我不想在响应能力上妥协。请帮帮我。
let editorChoice = document.querySelector('.editorchoice')
async function getImg() {
let imgData = await fetch('https://pixabay.com/api/?key=12334&editors_choice')
let imgRaw = await imgData.json()
console.log(imgRaw)
let itemData = imgRaw.hits
itemData.map((item) => {
let imgId = item.id
let imgType = item.type
let imgPreview = item.previewURL
let imgTag = item.tags
editorChoice.innerHTML += `<div class="col-lg-4 card">
<img src="${imgPreview}" class="img-responsive center-block" alt="${imgTag}"
</div>
<p class="text-center">${imgTag}</p>`
})
}
getImg()<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="container-fluid bg-3 text-center">
<h3>Editor's Choice</h3><br>
<div class="editorchoice"></div>
</div>答：
0赞
aarvinr
11/16/2023
#1
首先，您当前使用的是 Tailwind CSS，而不是 Bootstrap。确保使用最新版本的 Tailwind，将 替换为：<link />
<script src="https://cdn.tailwindcss.com"></script>
接下来，要将它们显示在网格中，请使用 Tailwind 中内置的 和 类：.grid.grid-cols
<div id="editorChoice" class="grid grid-cols-4">
<!-- Images go in here -->
</div>
要添加图像本身，而不是使用 ，理想情况下应该使用 document.createElement（） 和 document.appendChild（）：.innerHTML
async function fetchImage() {
let img = await fetch(
"https://pixabay.com/api/?key=12334&editors_choice",
).json().hits;
img.map((item) => {
let container = document.createElement("div");
let element = document.createElement("img");
element.src = item.previewURL;
element.alt = item.tags;
container.appendChild(element);
let label = document.createElement("p");
let labelText = document.createTextNode(item.tags);
label.appendChild(labelText);
container.appendChild(label);
document.getElementById("editorChoice").appendChild(container)
});
}
fetchImage();
在这里，我们将遍历返回的结果并创建各种元素，使它们全部显示在 4 列网格中。
下面是一个使用 Lorem Picsum 而不是 Pixabay 的可运行代码片段：
async function fetchImage() {
let img = [
{
previewURL: `https://picsum.photos/1920/1080?random=1`,
tags: "A Picture",
},
{
previewURL: `https://picsum.photos/1920/1080?random=2`,
tags: "A Picture",
},
{
previewURL: `https://picsum.photos/1920/1080?random=3`,
tags: "A Picture",
},
{
previewURL: `https://picsum.photos/1920/1080?random=4`,
tags: "A Picture",
},
{
previewURL: `https://picsum.photos/1920/1080?random=5`,
tags: "A Picture",
},
{
previewURL: `https://picsum.photos/1920/1080?random=6`,
tags: "A Picture",
},
];
img.map((item) => {
let container = document.createElement("div");
let element = document.createElement("img");
element.src = item.previewURL;
element.alt = item.tags;
container.appendChild(element);
let label = document.createElement("p");
let labelText = document.createTextNode(item.tags);
label.appendChild(labelText);
container.appendChild(label);
document.getElementById("editorChoice").appendChild(container);
});
}
fetchImage();<script src="https://cdn.tailwindcss.com"></script>
<h3>Editor's Choice</h3>
<div id="editorChoice" class="grid grid-cols-4">
<!-- Images go in here -->
</div>
评论