Question

我正在尝试使用bootstrap容器来制作3个面板的行;但是，使用我当前的代码，一个面板最终在容器中，两个面板留在外面。

我不太确定我哪里出错了。

我已经计算并重复了我的<div>和</div>这么多次，所以我不相信这是问题

//var count = 0; above
//for loop for n > 3 above
html = "";
            if (count%3===0) {
                html = html + "<div class=\"container\">" +
                                 "<div class=\"row\">";
            }
                html = html + "<div class=\"col-sm-4\">" +
                                "<div class=\"panel panel-primary\">" +
                                "<div class=\"panel-heading\">" + name + "</div>" +
                                "<div class=\"panel-body\"><img src=\"" + imageURL + "\"class=\"img-responsive\" style=\"width:100%\" alt=\"Image\"> </div>" +
                                "<div class=\"panel-footer\"> <h2>$" +
                                price.toString() + recString + "</h2>" + description + "</div> </div> </div>";
                    if (count%3===2) {
                    html = html + "</div> </div> <br> <br>"
                }
                    count = count + 1;
                    $('#items').append(html);

这是我的html文件中的项目div。

<div id="items" >

</div><br>

Answer 1

通过在循环的每次迭代中附加到$items div，Web浏览器检查并看到在追加后项目div已被关闭。关闭父级时，Web浏览器将关闭所有子级，包括容器和行div。

解决方案是在循环外部追加

Bootstrap容器提前关闭

1 个答案: