引导 - 向井中添加图例 [英] Bootstrap - Adding legend to well
问题描述
我目前使用twitter bootstrap，这是很好的工作，但我想添加一个图例到一个窗体中使用的well元素（这样我可以有多个井，表示子部分表单）。
现在我的表单看起来像是一个例子：
我想添加一个图例，以便我可以例如，在详细信息标题下有两个单独的部分，但是能够表示它们的用途。一个传说似乎是做到这一点的最好方法。
html的相关部分如下：
< form>
< div class =row>
< div class =span6>
< div class =nonboxy-widget>
< div class =widget-head>
< h5>详细信息< / h5>
< / div>
< div class =widget-content>
< div class =widget-box>
< div class ='form-horizontal well'>
< fieldset>
< div class =control-group>
< label class =control-label>销售类型< / label>
< div class =controls>
当我尝试添加一个图例标签到字段集或 div 与类形成水平井，它像框中的标题一样，不像一个正常的html图例。它呈现如下：
/ p>
代码
< div class ='form-horizontal井'>
< fieldset>
< legend>详细信息< / 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，最终得到：
你会注意到这不是我想要的 - 我想在传说的边界well div，不在字段集本身（因为这是一个嵌套形式，一个井内可能有多个字段集，所以我不能把边框放在字段集本身）。
我似乎已经用上面的代码实现了这一点，唯一的问题是在图例的边框上打破 - 这可以用图例文本背景的某种不透明度来完成，
$ b
任何进一步的建议？ =h2_lin>解决方案
将 .well 放在 fieldset 图例和字段集样式。
HTML
< form>
< fieldset class =well the-fieldset>
< legend class =the-legend>您的图例< / legend>
...您的输入...
< / 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 stylesreset。
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).
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:
<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 div with class form-horizontal well it renders like a heading inside the box, not like a normal html legend. It renders like:
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:
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:
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:
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).
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!
Put the .well on the fieldset and override Bootstrap's legend and fieldset styles.
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;
}
NOTE: I've ommited Bootstrap classes like rows, spans, controls, etc. Use them to fit your layout.
EDIT: Changed code to include fieldset styles "reset".
这篇关于引导 - 向井中添加图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
