时间戳

首页 > 解决方案 > 在 javascript 中使用 Bootstrap 行和列

javascript - 在 javascript 中使用 Bootstrap 行和列

问题描述

$.getJSON('http://localhost/REST_API/api/post/read.php', function(data) {
    data.forEach(obj => {
        $( ".monsterlist" ).append("<div class='card' style='width:400px;'>"); 
        $( ".monsterlist" ).append("<img class='card-img-top' src='img/monster_img/"+ obj.monster_img+".png' style='width:200px;height:200px;'>"); 
        console.log(obj.monster_img);
        $( ".monsterlist" ).append("<div class='card-body'>"); 
        $( ".monsterlist" ).append("<h4 class'card-title'>"+obj.monster_name+"</h4>"); 
        $( ".monsterlist" ).append("<p class='card-text'>"+obj.monster_type+"</p>"); 
        $( ".monsterlist" ).append("</div></div>");
    });
});

大家好。我玩弄自己的 API。一切正常，但现在我尝试每行输出 3 行。

但我不知道如何在 3 个对象之后创建一个新行。我尝试了很多，但没有任何效果。也许有人可以帮助我 :) 我在这里尝试过 在此处输入链接描述

标签： javascriptbootstrap-4

解决方案

Bootstrap 支持自动分列，只需使用 col-4（每显示行的最大值始终为 12）作为您创建的每个列元素的类。

你可以在函数调用中使用这样的东西：

let card = `
<div class="card col-4" style='width:400px;'>
  <img class='card-img-top' src='img/monster_img/${obj.monster_img}.png' style='width:200px;height:200px;'>
  <div class='card-body'>
    <h4 class'card-title'>${obj.monster_name}</h4>
    <p class='card-text'>${obj.monster_type}</p>
  </div>
</div>
`;
$(".monsterlist").append(card);

模板字符串参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

jQuery$(node).append()将所有内容附加到您指定的节点。您的节点.monsterlist将拥有卡块的所有子节点，这会导致其他问题。这就是为什么我以这种方式格式化您的代码。

.monsterlist还需要类行。

<div class="monsterlist row"></div>

推荐阅读