html添加bootstrap,html – Bootstrap – 添加图例

我目前正在使用twitter bootstrap，这是很好的工作，但我想添加一个图形中使用的“well”元素的图例(以便我可以有多个孔，表示窗体上的子部分)。

现在我的形式看起来就是一个例子：

我想添加一个图例，以便我可以在“详细信息”标题下面有两个单独的部分，例如，但可以表示它们是什么。传说似乎是最好的办法。

html的相关部分看起来像：

Details

Sale Type

当我尝试添加一个图例标签到字段集或div类与水平，它呈现像一个标题在框内，不像一个普通的html图例。它呈现如下：

与代码

Details

任何人都可以推荐一种方式让这个渲染像一个普通的传说，在框的边框上？

编辑：感谢Simbirsk的代码，我现在有：

这是非常接近的，但是我想要的是让传说看起来像一个正常的html传说在一个字段集(即它坐在边框)，所以我把CSS改为：

legend {

padding: 0;

margin-left: 10px;

margin-bottom: -9px;

border: 0;

color: #999999;

background-color: #333333;

}

但是导致了这一点：

如何确保井上的边界“打破”(不会显示在文本后面)像一个正常的场集图例？

编辑2：在编辑第一个答案之后，我将代码应用到我的css，最后是：

你会注意到这不是我正在寻找的 – 我正在尝试把这个传奇放在井的边界上，而不是在场上本身(因为这是一个嵌套的形式，在一个井内可能有多个油田，所以我不能把边界放在现场本身)。

我似乎已经用上面的代码实现了这一点，唯一的问题是在传说中的边界上放一个中断 – 这可以通过某种不透明度来实现传奇文本的背景，还有一点点填充？

有进一步的建议吗？

谢谢！