Html 引导-将图例添加到井中

我目前正在使用twitter引导，它工作得很好，但是我想给表单中使用的“well”元素添加一个图例（这样我就可以有多个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">

有人能推荐一种方法让它像一个普通的图例一样呈现在框的边界上吗

编辑：多亏了Simbirsk的代码，我现在有了：

这非常接近，但我想要的是让图例看起来像字段集上的普通html图例（即位于边框中），因此我将CSS更改为：

legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}

但结果是：

如何确保井上的边界“断开”（不显示在文本后面）与正常字段集图例一样

编辑2：在对第一个答案进行编辑之后，我将代码应用到我的css中，结果是：

你会注意到这并不是我想要的-我试图在井div的边界上获得图例，而不是在字段集本身上（因为这是一种嵌套形式，一口井内可能有多个字段集，所以我不能在字段集本身上放置边界）

我似乎已经通过上面的代码实现了这一点，唯一的问题是在图例所在的边界处设置了一个断点-这可以通过图例文本背景的某种不透明性和一些填充来实现吗

还有什么建议吗

---

谢谢

将

.well

放入

字段集

并覆盖引导的

图例

和

字段集

样式。
HTML

注意：我推荐了行、跨距、控件等引导类。使用它们来适应您的布局。

---

编辑：将代码更改为包含

字段集

样式“重置”。

这对我来说非常有用，因为我试图在引导中实现groupbox

字段集{
最小宽度：0；
填充：0；
保证金：0；
边界：0；
}
.嗯{
最小高度：20px；
填充：19px；
边缘底部：20px；
背景色：#F5；
边框：1px实心#e3；
边界半径：4px；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,05）；
盒影：插入0 1px 1px rgba（0,0,0,05）；
}
.好吧，传奇{
显示：块；
字体大小：14px；
宽度：自动；
填充：2px7px 2px5px；
边缘底部：20px；
行高：继承；
颜色：#333；
背景：#fff；
边框：1px实心#e3；
边界半径：4px；
盒影：插入0 1px 1px rgba（0,0,0,05）；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,05）；
}

分组框图例
... 你的意见。。。

图例应与字段集一起使用，如果您想创建from的子节，则应将字段集与其对应的图例一起使用。您的表格也应附在标签内，而不是div内。如果要根据自己的意愿修改图例样式，请为其创建ID并声明样式。感谢您的评论-我的表单有标记，但它们与图例的呈现无关，因此我没有在代码中显示它们。我将编辑以避免混淆。我的问题是如何创建一种样式，使其能够显示在框的边框上-您能提供帮助吗？感谢您的回答-我已经用结果更新了问题，它可能需要一些改进。更新为恢复标准字段集边框行为+1，以便@HO使用您的答案，然后接受他自己的拒绝，甚至不提供密码。有那么高的代表性的人应该更清楚。在Bootstrap 3.2中，我还必须在我的legend元素中添加“width:inherit”，以解决legend以100%宽度有效渲染的问题，从而隐藏了字段集的大部分顶部轮廓。这一解决方案的功劳：

legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}

<form>
    <fieldset class="well the-fieldset">
        <legend class="the-legend">Your legend</legend>
        ... your inputs ...
    </fieldset>
</form>

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