19

我目前正在使用 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">

当我尝试将图例标记添加到字段集或divwith 类form-horizontal well时，它呈现为框内的标题，而不是普通的 html 图例。它呈现如下：

在此处输入图像描述

用代码

<div class = 'form-horizontal well'>
  <fieldset>
    <legend>Details</legend>
    <div class="control-group">

任何人都可以推荐一种方法来让它像普通图例一样呈现在盒子的边框上吗？

编辑：感谢辛比尔斯克的代码，我现在有：

在此处输入图像描述

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

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

但这导致了这个：

在此处输入图像描述

如何确保井上的边框像普通的字段集图例一样“中断”（不显示在文本后面）？

编辑2：在对第一个答案进行编辑之后，我将代码应用于我的css并最终得到：

在此处输入图像描述

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

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

有什么进一步的建议吗？

谢谢！

4

2 回答 2

44

放上.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样式“重置”。

于 2012-08-29T07:03:35.443 回答
5

这对我有用，因为我试图在 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>

于 2016-08-16T16:32:21.403 回答