在 Bootstrap 3 中对齐与可排序句柄相邻的元素答案

【问题标题】：Aligning elements adjacent to sortable handle in Bootstrap 3在 Bootstrap 3 中对齐与可排序句柄相邻的元素
【发布时间】：2013-12-19 23:01:53
【问题描述】：

我有一个可排序的项目列表（每个项目都有一个可拖动的句柄），我正在尝试对齐每个项目中的一些元素：标题、链接和一些描述性文本。这些项目与左浮动 div 相邻（您在左侧看到的“句柄”）。不幸的是，标题和链接之间有很大的差距：

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

这是我在图像编辑程序中制作的模型，说明了我想要实现的目标（标题和链接之间没有太大的差距）：

我知道它与.handle div 有关，它向左浮动并具有指定的宽度和高度，但我无法完全弄清楚。当我删除.handle 时，一切都很好，没有尴尬的间隙。我确信这是一个简单的解决方法，但我正在努力寻找答案。任何的意见都将会有帮助。谢谢！

【问题讨论】：

标签： jquery html css twitter-bootstrap-3 jquery-ui-sortable

【解决方案1】：

尝试将这些属性添加到您现有的类中：

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

为了帮助清除您的浮动元素，因为您的 itemSubContainer 类不知道包含的元素，因为它们是浮动的并从流程中取出。

【讨论】：

谢谢，1337！这是使用您的建议的固定版本：bootply.com/101614
乐于助人，这是最简单最简单的解决方案 :)

【解决方案2】：

试试 Bootstrap 中给出的Media Object 实现。它包括一个左侧浮动元素，右侧有多个文本元素。

<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>

【讨论】：

【解决方案3】：

问题是.row 本身也是向左浮动的，每个.row 都会清除浮动。不要浮动.handle，而是使用position: absolute，这样句柄就不会干扰其余内容。

请注意，h4 上还有 10 像素的边距，您可能希望调整。

【讨论】：