用div布局且浮动,为什么有一行左边为空白

img
我试了很久,只有那一行有问题,其他行都是正常的。

<div class="jiazai"><input type="text" placeholder="请输入加载几个"><button class="jiazai-btn">点击加载</button></div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"> LOL英雄页面</h3>
        </div>
        <div class="panel-body">
            <div class="row  clear">
                <div class="col-sm-6 col-md-4 " index=0 id="main">
                    <div class="thumbnail">
                        <img src="images/1480473717181.png" alt="...">
                        <div class="caption">
                            <h3>卡密尔</h3>
                            <p><a href="#" class="btn btn-primary" role="button">购买</a> <button class="btn btn-default" role="button">详情</button></p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>


var index = 1;
    $('.jiazai-btn').on("click", function() {
        var xhr = new XMLHttpRequest();
        xhr.open("get", "lol.php");
        var length = $('.jiazai-btn').siblings("input").val();
        length = parseInt(length) + index;
        xhr.onload = function() {
            for (var i = index; i < length; i++) {
                var c = $('#main').first().clone();
                $(c).attr("index", i);
                $('.row').append(c);
                $(c).find("img").prop("src", JSON.parse(xhr.responseText)[i].champion_icon);
                $(c).find("h3").html(JSON.parse(xhr.responseText)[i].champion_name);
            }
            index = length;
        };
        xhr.send(null);
    })

猜测这段占了位置

<div class="jiazai"><input type="text" placeholder="请输入加载几个"><button class="jiazai-btn">点击加载</button></div>

如果你这段没有设置浮动,可能占了左边位置,不过你最好把css样式也贴上来,不然无法调试。
要不你可以自己调试,打开浏览器F12,审查一下元素,哪个DIV占了位置导致错位。

给.row固定个高度即可

如果是浮动的问题,那就把浮动清了,在浮动元素的父级上添加overflow:hidden