Обтекание div вокруг сортировщика

Question

Следующее изображение - эффект, который я собираюсь реализовать. Я использовал сортировку jquery ui, чтобы элементы в поле можно перетаскивать и сортировать. Однако я не могу обернуть div в сортировщик. Фактически, я сталкивался с теми же проблемами, когда я использую столбцы начальной загрузки. Я не могу легко обернуть 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. Извините, я не знаю, как написать онлайн-демо с функциями Bootstrap. Итак, есть ли у вас какие-либо идеи по устранению проблемы с оберткой?

Спасибо!

Answer 1

Где overflow: hidden не может быть использован, следующий вариант пойти для общего clearfix, таких как:

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

Я не знаком с BS, но это, возможно, уже есть класс для этого что вы можете просто повторно использовать.