我正在使用 BootstrapJSP
page.
我想用<fieldset>
and <legend>
对于我的表格。这是我的代码。
<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" 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
我想按以下方式输出
我尝试添加
border:none;
width:100px;
to legend.scheduler-border
在CSS中。我得到了预期的输出。但问题是我想添加另一个<fieldset>
对于其他领域。当时图例中文本的宽度是一个问题,因为它比100px
.
那么我该怎么做才能得到我提到的输出呢? (不敲击图例文字)
这是因为 Bootstrap 默认设置了宽度legend
元素至 100%。您可以通过更改来解决此问题legend.scheduler-border
还可以使用:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle 示例 http://jsfiddle.net/JamesD/PgA84/1.
您还需要确保添加自定义样式表afterBootstrap 可以防止 Bootstrap 覆盖您的样式 - 尽管您的样式在这里应该具有更高的特异性。
您可能还想添加margin-bottom:0;
也可以减少图例和分隔线之间的间隙。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)