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。删除它，它工作正常。如果您仍想要上边距，请改为申请其父李。

Answer 2

删除标记之间的所有空格＆＃34; <li>＆＃34;

<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 {overflow：hidden; float：none！important; display：inline-block！important; margin-left：0！important; margin-right：1.5％;}

Jquery UI可排序列表正在抽搐

2 个答案: