我目前正在使用twitter bootstrap，这是很好的工作，但我想添加一个图形中使用的“well”元素的图例(以便我可以有多个孔，表示窗体上的子部分)。
现在我的形式看起来就是一个例子：
我想添加一个图例，以便我可以在“详细信息”标题下面有两个单独的部分，例如，但可以表示它们是什么。传说似乎是最好的办法。
html的相关部分看起来像：
<form>
<div class="row">
<div class="span6">
<div class="nonBoxy-widget">
<div class="widget-head">
<h5>Details</h5>
</div>
<div class="widget-content">
<div class="widget-Box">
<div class = 'form-horizontal well'>
<fieldset>
<div class="control-group">
<label class="control-label">Sale Type</label>
<div class="controls">
当我尝试添加一个图例标签到字段集或div类与水平，它呈现像一个标题在框内，不像一个普通的html图例。它呈现如下：
与代码
<div class = 'form-horizontal well'>
<fieldset>
<legend>Details</legend>
<div class="control-group">
任何人都可以推荐一种方式让这个渲染像一个普通的传说，在框的边框上？
编辑：感谢Simbirsk的代码，我现在有：
这是非常接近的，但是我想要的是让传说看起来像一个正常的html传说在一个字段集(即它坐在边框)，所以我把CSS改为：
legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}
但是导致了这一点：
如何确保井上的边界“打破”(不会显示在文本后面)像一个正常的场集图例？
编辑2：在编辑第一个答案之后，我将代码应用到我的css，最后是：
你会注意到这不是我正在寻找的 – 我正在尝试把这个传奇放在井的边界上，而不是在场上本身(因为这是一个嵌套的形式，在一个井内可能有多个油田，所以我不能把边界放在现场本身)。
我似乎已经用上面的代码实现了这一点，唯一的问题是在传说中的边界上放一个中断 – 这可以通过某种不透明度来实现传奇文本的背景，还有一点点填充？
有进一步的建议吗？
谢谢！
解决方法
将.well放在字段集上，并覆盖Bootstrap的图例和字段集样式。
HTML
HTML
<form>
<fieldset class="well the-fieldset">
<legend class="the-legend">Your legend</legend>
... your inputs ...
</fieldset>
</form>
CSS
.the-legend {
border-style: none;
border-width: 0;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
.the-fieldset {
border: 2px groove threedface #444;
-webkit-Box-shadow: 0px 0px 0px 0px #000;
Box-shadow: 0px 0px 0px 0px #000;
}
注意：我已经推荐了Bootstrap类，如行，跨距，控件等。使用它们来适应您的布局。编辑：更改代码以包括字段集样式“重置”。
