jQuery Sortable 和 Bootstrap 3 - 适用于小型设备，不适用于大型设备

Question

我正在使用 jQuery Sortable ( http://johnny.github.io/jquery-sortable/ ) 和 Bootstrap 3。

我正在尝试对表单中的行进行排序，我想出了以下代码:

 $("#timeline_list").sortable({
     handle: 'i.fa',
     onDrop: function (item, container, _super) {
         var data = $('#timeline_list').sortable("serialize").get();
         var jsonString = JSON.stringify(data, null, ' ');

         console.log(jsonString);
         _super(item, container)
     }


 });

CSS:

.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */
    cursor: pointer;
}
.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content:"\e080";
    /* adjust as needed, taken from bootstrap.css */
}
.timeline_name {
    height: 40px!important;
    font-weight: bold;
    font-size: 19px!important;
    width: 95%!important;
}
#timeline_list .accordion-toggle:after {
    margin-top: -30px;
}
.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
#timeline_list li.placeholder {
    position: relative;
    /** More li styles **/
}
#timeline_list li.placeholder:before {
    position: absolute;
    /** Define arrowhead **/
    content:"";
    width: 0;
    height: 0;
    margin-top: -5px;
    left: -5px;
    top: -4px;
    border: 5px solid transparent;
    border-left-color: red;
    border-right: none;
}
#events ul, #events li, #timeline li {
    text-decoration: none;
    list-style-type: none!important;
}

我使用 HTML 标记创建了以下 jsfiddle:

http://jsfiddle.net/9UA2B/

排序在小型设备上可以按需要进行，但在大屏幕上则不起作用 - 元素的位置计算错误。

我该如何解决这个问题？

编辑:我创建了一个更具可读性的 jsfiddle 来演示这个问题:

http://jsfiddle.net/9qsxZ/

Answer 1

问题是我在 li 上有 col-md-12 类，正在排序。删除后一切正常...