javascript - 在排序列表周围包装 div

Question

下图就是我要实现的效果。我使用了 jquery ui sortlist 以便可以拖动和排序框中的元素。但是，我无法将 div 包装在排序列表周围。实际上，每当我使用 bootstrap 列时，我都会遇到同样的问题。如果使用列，我无法轻松地将 div 包裹在内容周围，也无法格式化内部元素。

这是我的 HTML 代码:

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
    <div class="summary-theme">
        <p>Theme1</p>
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default">Item 1</li>
            <li class="ui-state-default">Item 2</li>
            <li class="ui-state-default">Item 3</li>
            <li class="ui-state-default">Item 4</li>
            <li class="ui-state-default">Item 5</li>
        </ul>
    </div>
</div>

CSS: /* 摘要框 */

.summary-theme{
  display:block;
  margin-top:10px;
  margin-bottom: 40px;
  width:100%;
  background: #fff;
  box-shadow: 1px 1px 2px #A7A7A7;
}
.summary-theme .connectedSortable{
  border:0px;
}
.summary-theme p{
  display:block;
  float:left;
  margin:-20px -15px;
  background: #0CBD94;
  border: 4px solid #FFFFFF;
}

如果我将溢出设置为“隐藏”，则该框可以成功换行。但在那种情况下，标签 <p>不会正确显示，因为它是负边距。 当它们没有被 Bootstrap Columns 包装时，事情看起来没问题。抱歉，我不知道如何使用 Bootstrap 功能编写在线演示。那么，您对如何解决 div 环绕问题有什么想法吗？

谢谢!

Answer 1

不能使用overflow: hidden的地方，下一个选择是去寻找一个通用的clearfix，例如:

.summary-theme:after {
  content: "";
  display: table;
  clear: both;
}

我不熟悉 BS，但它可能已经有一个你可以重用的类。