Question

我目前正在使用Twitter bootstrap，它运行良好，但我想在＆＃34; well＆＃34;中添加一个图例。表单中使用的元素（这样我可以有多个井，表示表单上的子部分）。

我的表单现在的样子是：

enter image description here

我想添加一个图例，以便我可以在＆＃34;详细信息＆＃34;下方添加两个单独的部分。例如，标题，但能够表示它们的用途。传说似乎是最好的方法。

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-horizontal well时，它会像框内的标题一样呈现，而不像普通的html图例。它呈现如下：

enter image description here

代码

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

有人可以推荐一种方法让它像正常的图例一样呈现在盒子的边框上吗？

编辑：感谢Simbirsk的代码，我现在有：

enter image description here

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

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

但结果是：

enter image description here

我如何确保井上的边界断开＆＃34; （不显示在文本后面）就像普通的字段集图例一样？

编辑2：在编辑第一个答案后，我将代码应用到我的CSS中，最后得到：

enter image description here

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

我似乎已经通过上面的代码实现了这一点，唯一的问题是在传奇的边界处打破 - 这可以通过对图例文本的背景的某种不透明度来完成，并且有点填充？

还有其他建议吗？

谢谢！

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

Answer 2

这对我来说在我试图在Bootstrap中作为一个组合框实现的目的。

Courses

<Courses>
        <CourseID>1</CourseID>
        <CourseTitle>Meat Science</CourseTitle>
        (etc etc)
        <Occurrences>
                <OccurrenceID>1</OccurrenceID>
                <OccurrenceTitle>Meat Science Autumn 2016</OccurrenceTitle>
                <CourseID>1</CourseID>
                <OccurrencesUnits>
                        <OccurrencesUnitsID>1</OccurrencesUnitsID>
                        <OccurrenceID>1</OccurrenceID>
                        <UnitID>1</UnitID>
                </OccurrencesUnits>
        </Occurrences>
</Courses>

<Courses>
   ... more courses...
</Courses>

<Units>
   ...
</Units>

<Locations>
   ...
</Locations>

Bootstrap - 添加图例

2 个答案: