jquery - Jquery UI 可排序列表正在抽搐

Question

我使用带有引导流体布局的 jquery UI 可排序列表。一切都很好，但是在移动事件中，一些“li”移动了大约 10 个像素。请参阅演示以获得更好的理解。 http://jsfiddle.net/6UkdR/3/

<div class="row-fluid">
    <ul id="sortable">
        <li class="ui-state-default span3">
            ....
        </li>
        ....
    </ul>
</div>
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#sortable .ui-state-default {
    min-height: 350px;
}
.row-fluid [class*="span"]:nth-child(5n) {
    margin-left: 0;
}
.ui-sortable-placeholder {
    margin-left: 0 !important;
}
$("#sortable").sortable({
    cursor: 'move',
    scroll: 'false',
    opacity: 0.9
}).disableSelection();

Answer 1

这是因为margin-top:10px;给了.thumbnail班级。删除它，它工作正常。如果您仍然想要上边距，请改为应用到其父 li。

Answer 2

删除标签之间的所有空格“ <li>”

<div class="row-fluid">
        <ul id="sortable">
            <li class="ui-state-default span3">
                ....
            </li><!-- Remove space
    --><li class="ui-state-default span3">
                ....
            </li><!-- Remove space
    --><li class="ui-state-default span3">
                ....
            </li>
        </ul>

并将样式添加到 li { overflow: hidden;}

或为您的演示添加样式

span.span3{溢出：隐藏；浮动：无！重要；显示：内联块！重要；左边距：0！重要；右边距：1.5%；}