Выравнивание элементов, смежных с сортируемой ручкой в ​​Bootstrap 3

Question

У меня есть сортируемый список элементов (каждый с перетаскиваемым дескриптором), и я пытаюсь выровнять некоторые элементы внутри каждого элемента: заголовок, ссылку и некоторый описательный текст. Элементы смежны с левым плавающим div («ручка», которую вы видите слева). К сожалению, существует большой разрыв между заголовком и ссылками:

(http://www.bootply.com/101604)

Вот макетом я сделал в программе редактирования изображений, которая иллюстрирует то, что я пытаюсь не достигнут (нет большого разрыва между названием и ссылкой):

Я знаю, что есть что-то делать с .handle DIV, который floate d left и имеет указанную ширину и высоту, но я не могу это понять. Когда я удаляю .handle, все становится хорошо, без неудобного зазора. Я уверен, что это простое решение, но я изо всех сил пытаюсь найти ответ. Любые предложения будут полезны. Благодаря!

Answer 1

Попробуйте добавить эти свойства к существующим классам:

.itemSubContainer { 
    overflow:hidden; 
} 
.handle { 
    margin-right:10px; 
} 

Чтобы очистить плавали elemets, потому что ваш класс itemSubContainer не знает о содержащих элементы, потому что они всплывают и извлекали из потока.

Answer 2

Попробуйте выполнить Media Object в Bootstrap. Он включает левый элемент с несколькими текстовыми элементами справа.

<div class="media"> 
    <a class="pull-left" href="#"> 
    <img class="media-object" src="..." alt="..."> 
    </a> 
    <div class="media-body"> 
    <h4 class="media-heading">Media heading</h4> 
    ... 
    </div> 
</div> 

Answer 3

Проблема заключается в том, что сам по себе .row также плавающей влево и каждый .row очищает поплавок. Вместо того, чтобы плавать .handle, используйте position: absolute, чтобы ручка не мешала остальной части содержимого.

Обратите внимание, что есть также 10px margin на h4, который вы можете настроить.