Bootstrap 容器提前关闭答案

【问题标题】：Bootstrap container closes earlyBootstrap 容器提前关闭
【发布时间】：2017-06-09 18:36:51
【问题描述】：

我正在尝试使用引导容器来制作 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>

【问题讨论】：

你想用这个实现什么？为什么要使用面板？为什么要在这个循环中创建 HTML？
您可以创建一个动态面板并使用 JS 来遍历您的数据集。并为数据中的每一行创建新面板

标签： javascript html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

解决方案是在循环的末尾追加

【讨论】：