具有可排序jQueryUI的Bootstrap 4内联列表

Question

我正在尝试使用带有可排序jqueryUI的引导内联列表。我的目标是要有一个可排序的水平列表。每个列表项将包含引导程序的卡组件。

问题：拖动列表项（卡片组件）时，容器div的大小加倍。

有人可以帮助吗？

屏幕截图：

JSFiddle： JSFiddle

 $(function() {
    $( "#sort_v" ).sortable({
      revert: true
    });    
    $( "#sort_h" ).sortable({
      revert: true
    });    
    $( "#sort_h_basic" ).sortable({
      revert: true
    });    
    $( "ul, li" ).disableSelection();
  });

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  margin: 10px;
}

.list-group, .list-inline {
  border: solid 1px red;
}

.list-inline-item {
  border: solid 1px blue;
}

.panel-placeholder {
	border: 1px dotted orange;
    border-radius: 4px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
  <!-- Vertical 
  <div class="row">
    <div class="col">
      <ul id="sort_v" class="list-group">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
        <li class="list-group-item">Item 4</li>
        <li class="list-group-item">Item 5</li>
      </ul>
    </div>
  </div>
  --> 
  <div class="row">
    <div class="col">
      <ul id="sort_h_basic" class="list-inline">
        <li class="list-inline-item">Item 1</li>
        <li class="list-inline-item">Item 2</li>
        <li class="list-inline-item">Item 3</li>
        <li class="list-inline-item">Item 4</li>
        <li class="list-inline-item">Item 5</li>
      </ul>
    </div>
  </div>
  <!-- Horizontal -->
  <div class="row">
    <div class="col">
      <ul id="sort_h" class="list-inline">
        <li class="list-inline-item">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Item 1</h5>
              <p class="card-text">Some quick example text to build on the card title</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>
        </li>
        <li class="list-inline-item">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Item 2</h5>
              <p class="card-text">Some quick example text to build on the card title</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>          
        </li>
        <li class="list-inline-item">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Item 3</h5>
              <p class="card-text">Some quick example text to build on the card title</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>        
        </li>
      </ul>  
    </div>
  </div>  
</div>