jquery - 是否可以将 Bootstrap 的流体网格布局系统与 jQuery UI 的可排序功能结合使用？

Question

我有一个流畅的 Bootstrap 布局，其中三个 span4 在一个 row-fluid div 内。这看起来和工作方式都符合我的预期。调用.sortable();行元素有效，但在拖动过程中，布局变得异常不可预测。这是一个链接： http: //jsfiddle.net/dhilowi​​tz /CwcKg/15/ 。如果您抓住第 3 项并将其向左移动，它的行为完全符合我的预期。但是，如果您抓住第 1 项并将其向右移动，那么所有的外观都会中断，第 3 项会移动到下一行。

JSFiddle： http: //jsfiddle.net/dhilowi ​​tz/CwcKg/15/

HTML：

<div class="container-fluid">
    <div class="row-fluid sortme">
        <div class="span4 element"><h2>Item #1</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
        <div class="span4 element"><h2>Item #2</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
        <div class="span4 element"><h2>Item #3</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
    </div>
    <!--/row-->
</div>
<!--/.fluid-container-->

Javascript：

$(".row-fluid").sortable();

CSS：

.element > h2 {
    cursor:pointer;
    background-color:#cccccc;
    border-radius:5px;
    padding: 0px 5px;
}

Answer 1

虽然我接受了上面的答案，但我想提供我在此期间提出的解决方案，因为我认为它可能有助于调试其他 jQuery + Twitter Bootstrap 冲突。我没有将 margin-left 应用于所有 .ui-sortable-placeholder，而是在start事件期间应用它们，并在 sortable 的stop事件期间删​​除它们。我还曾经appendTo指定助手应该附加到文档正文中，而不是在row-fluid.

CSS

.real-first-child {
    margin-left:0 !important;
}

Javascript

$(".row-fluid").sortable({
    placeholder: 'span4',
    helper: 'clone',
    appendTo: 'body',
    forcePlaceholderSize: true,
    start: function(event, ui) {
        $('.row-fluid > div.span4:visible:first').addClass('real-first-child');
    }, 
    stop: function(event, ui) {
        $('.row-fluid > div.real-first-child').removeClass('real-first-child');
    },
    change: function(event, ui) {
        $('.row-fluid > div.real-first-child').removeClass('real-first-child');
        $('.row-fluid > div.span4:visible:first').addClass('real-first-child');
    }
});

链接： http: //jsfiddle.net/dhilowi​​tz /s7Kch/

Answer 2

问题似乎出在 .container-fluid 类中，引导 css 具有导致问题的左右填充。

这是 bootstrap.min.css 的规则：

.container-fluid {
    padding-right: 20px;
    padding-left: 20px;
}

您可以根据这篇文章尝试使用这个新规则：Jquery UI sortable with bootstrap bugs：

.ui-sortable-placeholder {
    margin-left: 0 !important;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

如果你需要一些额外的填充，你可以把你的代码放在外部 div 中。

好代码