使用域集图例引导

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

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

当前回答

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

2021-08-18 17:50:28

其他回答

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

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

看起来是这样的:

2018-05-23 11:40:25

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

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

这将给出下面的外观。

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

2017-09-19 15:52:36

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

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

2016-03-29 18:11:18

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

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

引导程序将图例的宽度设置为100%。这就是为什么它覆盖了字段集的顶部边界。图例有一个底部边框。

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

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

2017-10-13 21:02:00

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

2021-04-03 07:29:32

使用域集图例引导

推荐文章

最新文章

标签