html - Bootstrap - 向井中添加图例

Question

我目前正在使用 twitter bootstrap，它运行良好，但我想为表单中使用的“井”元素添加一个图例(这样我就可以有多个井，表示形式)。

我的表单现在的示例如下:

我想添加一个图例，这样我就可以在“详细信息”标题下有两个单独的部分，例如，但能够表示它们的用途。传说似乎是做到这一点的最佳方式。

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 类 form-horizo​​ntal well 时，它呈现为框内的标题，而不是正常的 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 并以:

你会注意到这不是我想要的 - 我试图在井 div 的边界上获取图例，而不是在字段集本身上(因为这是一个嵌套形式，其中可能有多个字段集一口井，所以我不能把边框放在字段集本身上)。

我似乎已经用上面的代码实现了这一点，唯一的问题是在图例所在的边界处打断 - 这可以通过对图例文本的背景进行某种不透明来完成吗？填充？

还有什么建议吗？

谢谢!

Answer 1

将 .well 放在 fieldset 上并覆盖 Bootstrap 的 legend 和 fieldset 样式。
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 类，例如行、跨度、控件等。使用它们来适应您的布局。
编辑:更改代码以包含 fieldset 样式“重置”。