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>是一个 block ，它不能和文本在同一行。

Demo (jsfiddle)

你必须让它 float (向右或向左):

<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%; }