twitter-bootstrap - 使用 Twitter Bootstrap 的图例区域中的图标或图标

Question

我有一个使用 Twitter Bootstrap 的带有图例的简单表单。我希望能够在这个时间点将图标放在我的图例文字旁边，这些文字是正确对齐的。

我尝试了一些标签，如 div 并将图标推到图例行的底部。我希望这与图例文本保持一致。

一个简短的例子。

    <legend>Contact Categories<div align="right"><i class="icon-comment"></i></div></legend>

这将导致图标一直下降到图例行。传奇本身保持原样。

提前致谢。

Answer 1

我不确定你为什么要使用align="right". 问题是您<div>是一个块，它不能与文本保持在同一行。

演示（jsfiddle）

你必须让它浮动（右或左）：

<legend>Contact Categories<div class="pull-right"><i class="icon-comment"></i></div></legend>

或者让它内联

<legend>Contact Categories<div id="myBlock" class="inline-block"><i class="icon-comment"></i></div></legend>

.inline-block { display: inline-block; }
#myBlock { text-align: right; width: 30%; }