我正在为我的JSP页面使用Bootstrap。
我想使用<fieldset>和<传奇>为我的形式。这是我的代码。
<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中的调度器边界。我得到了期望输出。但问题是，我想为其他字段添加另一个<fieldset>。当时图例中的文本宽度是一个问题，因为它的长度超过100px。
那么我该怎么做才能得到刚才提到的输出呢?(不打掉图例文字)
这是因为Bootstrap默认将图例元素的宽度设置为100%。你可以通过改变图例来解决这个问题。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覆盖您的样式—尽管您的样式在这里应该具有更高的特异性。
你可能还想添加margin-bottom:0;对它也要减少传说符和分隔符之间的差距。
只是想简单总结一下上面所有的正确答案。因为我不得不花很多时间来弄清楚哪个答案可以解决问题，以及幕后发生了什么。
使用bootstrap的fieldset似乎有两个问题:
引导程序将图例的宽度设置为100%。这就是为什么它覆盖了字段集的顶部边界。
图例有一个底部边框。
所以，我们需要修复的是设置图例宽度为auto，如下所示:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
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;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
如果你找不到任何合适的解决方案使用图例标签在引导5
你可以在图例标签中使用CSS属性作为替代解决方案，这是一个内联CSS示例。
style="margin-top:-15px; background-color: white; color: black;"
同样，在margin-top的fieldset标记中添加这一行
style="margin-top: 30px !important;"
我希望这是一个非常简单的解决方案，获得传说风格的引导5
