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">

当我尝试将一个图例标记添加到fieldset或divwith class时,form-horizontal 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的边界的传说,而不是在字段集本身(因为这是一个嵌套形式,有可能是一个内部的多个字段集好,所以我不能把边框放在fieldset本身上).

我似乎与上面的代码,唯一的问题是把休息在传说是边境实现这一点 - 这可以用某种不透明的传说文字的背景,和比特填充的呢？

还有什么建议？

谢谢!

Answer 1

把.well上fieldset并覆盖引导的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样式"重置".

Answer 2

这对我在 Bootstrap 中作为 groupbox 尝试实现的目标很有用。

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-legend {
  display: block;
  font-size: 14px;
  width: auto;
  padding: 2px 7px 2px 5px;
  margin-bottom: 20px;
  line-height: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

<form>
  <fieldset class="well">
    <legend class="well-legend">Group Box Legend</legend>
    ... your inputs ...
  </fieldset>
</form>