通过引导使用字段集图例 [英] Use Fieldset Legend with bootstrap
问题描述
我使用Bootstrap作为我的JSP页面。
我想使用 < fieldset>
和 < legend>
这是我的代码。
< fieldset class =scheduler-border>
< legend class =scheduler-border>开始时间< / legend>
< div class =control-group>
< label class =control-label input-labelfor =startTime>开始:< / label>
< div class =controls bootstrap-timepicker>
< input type =textclass =datetimetype =textid =startTimename =startTimeplaceholder =Start Time/>
< i class =icon-time>< / i>
< / div>
< / div>
< / fieldset>
CSS
fieldset.scheduler-border {
border:1px groove #ddd!important;
padding:0 1.4em 1.4em 1.4em!important;
margin:0 0 1.5em 0!important;
-webkit-box-shadow:0px 0px 0px 0px#000;
box-shadow:0px 0px 0px 0px#000;
}
legend.scheduler-border {
font-size:1.2em!important;
font-weight:bold!important;
text-align:left!important;
}
我得到这样的输出
我想要以下列方式输出
我试过添加
border:none;
width:100px; CSS中的
到 legend.scheduler-border
。我得到预期的输出。但问题是我想为另一个字段添加另一个 < fieldset>
。那个时候,图例中文本的宽度是一个问题,因为它比100px长。
那么我该怎么做才能得到像我提到的输出?这是因为Bootstrap默认设置了图例的宽度 / code>元素到100%。您可以通过更改
legend.scheduler-border
来修复此问题:
legend.scheduler-border {
width:inherit; / *或auto * /
padding:0 10px; / *给出一点左右的填充* /
border-bottom:none;
}
您还需要确保自己的自定义样式表
您可能还想要添加 margin- ,以避免Bootstrap重写您的样式。 bottom:0;
,以减少图例和分隔符之间的差距。
I am using Bootstrap for my JSP page.
I want to use <fieldset>
and <legend>
for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border
in CSS. And I am getting the expected output. But the problem is I would like to add another <fieldset>
for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend
element to 100%. You can fix this by changing your legend.scheduler-border
to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0;
to it as well to reduce the gap between the legend and the divider.
这篇关于通过引导使用字段集图例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!