使用域集图例引导

我正在为我的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;
}

我得到这样的输出 enter image description here

我想以以下方式输出

enter image description here

我试着加上

border:none;
width:100px;

到CSS中的legend.scheduler-border。我得到了期望输出。但问题是，我想为其他字段添加另一个<fieldset>。那时图例中的文本宽度是一个问题，因为它比100px长。

那么我该怎么做才能得到刚才提到的输出呢?(不打掉图例文字)

512353 次浏览
小开
最佳答案

这是因为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覆盖你的样式-尽管你的样式在这里应该有更高的特异性。

你可能还想添加margin-bottom:0;，以减少图例和分隔符之间的差距。

小开

我遇到了这个问题，我用这样的方法来解决:

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

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

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

这将给出下面的外观。 enter image description here < / p >

注意:为了使用不同的标题大小，我们需要改变样式。

小开

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

使用bootstrap的fieldset似乎有两个问题:

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

所以，我们需要修复的是设置图例宽度为auto，如下所示:

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

在bootstrap 4中，在字段集上有一个与图例混合的边界要容易得多。你不需要自定义css来实现它，它可以这样做:

<fieldset class="border p-2">
<legend  class="w-auto">Your Legend</legend>
</fieldset>

，看起来像这样: bootstrap 4 fieldset and legend < / p >

小开 
<fieldset  class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>

使用css:

.customer-legend:before {
left: 100px;
}
小开 

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

enter image description here

我希望这是一个非常简单的解决方案，获得传说风格的引导5

小开

在引导5中，应用到图例的默认样式的修改会导致与使用引导4获得的不同的呈现，然后必须添加float-none作为<legend>标记的类:

<fieldset class="border p-2">
<legend  class="float-none w-auto">Your Legend</legend>
</fieldset>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend  class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>

__abc0 __abc1 __abc2 __abc3 __abc4


提交答案