在sortlist中包装div

Question

以下图片是我要实施的效果。我使用了jquery ui sortlist，以便可以拖动和排序框中的项目。但是，我无法在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，但它可能已经有了一个可以重复使用的类。