使用带引导的字段集图例
使用带引导的字段集图例
提问于 2013-05-31 15:56:55
我正在为我的JSP页面使用Bootstrap。
我想在我的表单中使用<fieldset>和<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是
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还长。
那么，我应该怎么做才能像我前面提到的那样获得输出呢？(不删除图例文本)
回答 6
Stack Overflow用户
发布于 2018-05-23 19:40:25
在bootstrap 4中，在与图例混合的字段集上设置边界要容易得多。你不需要自定义的css来实现它，它可以像这样做：
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>它看起来像这样：
Stack Overflow用户
发布于 2016-03-30 02:11:18
我有这个问题，我用这种方法解决了：
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}Stack Overflow用户
发布于 2017-09-19 23:52:37
我有一个不同的方法，使用bootstrap面板来显示它更丰富一点。只是为了帮助别人并改进答案。
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
这将给出下面的外观。
注意:为了使用不同的标题大小，我们需要更改样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16852484
复制相关文章
相似问题