用引导程序使用Fieldset Legend

我为我的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" type="text" 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更长。

那么我应该怎么做才能像我刚才提到的那样得到输出呢？ （不要触及传奇文字）

Answer 1

这是因为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示例 。

您还需要确保在 Bootstrap 之后添加自定义样式表，以防止Bootstrap覆盖样式 – 尽pipe这里的样式应该具有更高的特性。

您可能还需要添加margin-bottom:0; 以减less传奇与分隔线之间的差距。

Answer 2

我有这个问题，我用这种方式解决：

 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; } 

Answer 3

我有一个不同的方法，使用引导面板来显示它更丰富。 只是为了帮助某人并改善答案。

 .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="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> 

Answer 4

只是想总结上面所有正确的答案。 因为我不得不花费很多时间来弄清楚哪个答案可以解决问题，以及幕后发生了什么。

bootstrap的fieldset似乎有两个问题：

1. bootstrap将宽度设置为legend为100％。 这就是为什么它覆盖了字段集的顶部边界。
2. 这个legend有一个bottom border 。

所以，我们需要解决这个问题是将图例宽度设置为auto，如下所示：

 legend.scheduler-border { width: auto; // fixes the problem 1 border-bottom: none; // fixes the problem 2 }