Html Bootstrap - 将图例添加到井中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12167848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Adding legend to well
提问by H O
I am currently using twitter bootstrap, which is working nicely, but I would like to add a legend to the "well" elements that are used in a form (so that I can have multiple wells, denoting sub-sections on a form).
我目前正在使用 twitter bootstrap，它运行良好，但我想为表单中使用的“井”元素添加一个图例（以便我可以有多个井，表示表单上的子部分）。
An example of what my form looks like now is:
我的表单现在的样子的一个例子是：
I would like to add a legend so that I can have two separate sections beneath the "Details" heading, for example, but be able to denote what they are for. A legend seems the best way to do this.
我想添加一个图例，以便我可以在“详细信息”标题下有两个单独的部分，例如，但能够表示它们的用途。传奇似乎是做到这一点的最佳方式。
The relevant section of the html looks like:
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">
When I attempt to add a legend tag to either the fieldset or the divwith class form-horizontal wellit renders like a heading inside the box, not like a normal html legend. It renders like:
当我尝试向字段集或divwith 类添加图例标签时，form-horizontal well它呈现为框内的标题，而不是普通的 html 图例。它呈现如下：
with the code
用代码
<div class = 'form-horizontal well'>
<fieldset>
<legend>Details</legend>
<div class="control-group">
Can anyone recommend a way to get this to render like a normal legend, on the border of the box?
任何人都可以推荐一种方法来让它像普通图例一样呈现在盒子的边界上吗？
EDIT: Thanks to the code from Simbirsk, I now have:
编辑：感谢 Simbirsk 的代码，我现在有：
This is pretty close, but what I wanted was to have the legend look like a normal html legend on a fieldset (i.e. for it to sit in the border), so I changed the CSS to:
这非常接近，但我想要的是让图例看起来像字段集上的普通 html 图例（即让它位于边框中），所以我将 CSS 更改为：
legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}
but that resulted in this:
但这导致了：
How can I ensure that the border on the well "breaks" (is not displayed behind the text) like a normal fieldset legend?
如何确保井上的边框像普通的字段集图例一样“中断”（不显示在文本后面）？
EDIT 2: Following the edit to the first answer, I applied the code to my css and ended up with:
编辑 2：在对第一个答案进行编辑之后，我将代码应用于我的 css 并最终得到：
You will note this is not quite what I was looking for - I am trying to get the legend on the border of the well div, not on the fieldset itself (because this is a nested form, there could be multiple fieldsets within one well, so I can't put the border on the fieldset itself).
您会注意到这不是我想要的 - 我试图在井 div 的边界上获取图例，而不是在字段集本身上（因为这是一个嵌套表单，一个井中可能有多个字段集，所以我不能把边界放在字段集本身上）。
I seemed to have achieved this with the code above, the only problem was putting a break in the border where the legend is - can this be done with some kind of opacity to the background of the legend text, and a bit of padding?
我似乎用上面的代码实现了这一点，唯一的问题是在图例所在的边界处打断 - 这可以通过对图例文本的背景进行某种不透明度和一点填充来完成吗？
Any further suggestions?
有什么进一步的建议吗？
Thanks!
谢谢！
回答by albertedevigo
Put the .wellon the fieldsetand override Bootstrap's legendand fieldsetstyles.
HTML
放在.well上面fieldset并覆盖 Bootstrap 的legend和fieldset样式。
HTML
<form>
<fieldset class="well the-fieldset">
<legend class="the-legend">Your legend</legend>
... your inputs ...
</fieldset>
</form>
CSS
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;
}
NOTE: I've ommited Bootstrap classes like rows, spans, controls, etc. Use them to fit your layout.
EDIT: Changed code to include fieldsetstyles "reset".
注意：我省略了 Bootstrap 类，如行、跨度、控件等。使用它们来适应您的布局。
编辑：更改代码以包含fieldset样式“重置”。
回答by Dekryptid
This worked for me in what I was trying to achieve as a groupbox in Bootstrap.
这对我在 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>