html – Bootstrap – 添加图例

概述我目前正在使用twitter bootstrap，这是很好的工作，但我想添加一个图形中使用的“well”元素的图例(以便我可以有多个孔，表示窗体上的子部分)。 现在我的形式看起来就是一个例子： 我想添加一个图例，以便我可以在“详细信息”标题下面有两个单独的部分，例如，但可以表示它们是什么。传说似乎是最好的办法。 html的相关部分看起来像： <form> <div class="row"> 我目前正在使用twitter bootstrap，这是很好的工作，但我想添加一个图形中使用的“well”元素的图例(以便我可以有多个孔，表示窗体上的子部分)。

现在我的形式看起来就是一个例子：

我想添加一个图例，以便我可以在“详细信息”标题下面有两个单独的部分，例如，但可以表示它们是什么。传说似乎是最好的办法。

HTML的相关部分看起来像：

<form>   <div >        <div >        <div >            <div >                <h5>Details</h5>            </div>            <div >                 <div >                    <div class = 'form-horizontal well'>                        <fIEldset>                            <div >                                <label >Sale Type</label>                                <div >

当我尝试添加一个图例标签到字段集或div类与水平，它呈现像一个标题在框内，不像一个普通的HTML图例。它呈现如下：

与代码

<div class = 'form-horizontal well'>  <fIEldset>    <legend>Details</legend>    <div >

任何人都可以推荐一种方式让这个渲染像一个普通的传说，在框的边框上？

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

这是非常接近的，但是我想要的是让传说看起来像一个正常的HTML传说在一个字段集(即它坐在边框)，所以我把CSS改为：

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

但是导致了这一点：

如何确保井上的边界“打破”(不会显示在文本后面)像一个正常的场集图例？

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

你会注意到这不是我正在寻找的 – 我正在尝试把这个传奇放在井的边界上，而不是在场上本身(因为这是一个嵌套的形式，在一个井内可能有多个油田，所以我不能把边界放在现场本身)。

我似乎已经用上面的代码实现了这一点，唯一的问题是在传说中的边界上放一个中断 – 这可以通过某种不透明度来实现传奇文本的背景，还有一点点填充？

有进一步的建议吗？

谢谢！

解决方法 将.well放在字段集上，并覆盖bootstrap的图例和字段集样式。
HTML

<form>    <fIEldset >        <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类，如行，跨距，控件等。使用它们来适应您的布局。编辑：更改代码以包括字段集样式“重置”。

总结

以上是内存溢出为你收集整理的html – Bootstrap – 添加图例全部内容，希望文章能够帮你解决html – Bootstrap – 添加图例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。