jQuery UI可排序和Bootstrap 3流体网格闪烁和破碎

我有一个基于Bootstrap 3的基本3 x 3网格布局.我需要它是流畅的,因此我省略了’容器’类.我需要使用 jquery ui可排序功能对行内的列进行排序.

一切正常,但每行的最后一列在拖动时表现得很糟糕.单击任何最后一列时,设计会中断.

我已经尝试了将占位符边距设置为0的解决方案,但我似乎无法使其工作.

任何帮助将不胜感激！谢谢！

JSFiddle

<div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>heading</h2>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue,molestie Tincidunt condimentum vitae,gravida a libero. Aenean sit amet felis 
              dolor,in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>heading</h2>
            <p>Lorem ipsum dolor sit amet,in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>
    <div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>heading</h2>
            <p>Lorem ipsum dolor sit amet,in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>



<script>
$('.row').sortable({
  connectWith: '.row',placeholder: 'placeholder'
});
</script>
<style>
.placeholder {margin-left: 0 !important; border: 1px solid #ccc}
</style>

$('.row').sortable({
    Helper: 'clone',placeholder: 'col-xs-4'
});