html - fieldset 没有完全显示在 div 周围

Question

我正在使用 fieldset 在 div 周围创建带标题的边框。

这是代码:

<div class="form-group col-xs-12">
        <fieldset class="field_set col-xs-12">
            <legend style="font-weight:bold;font-size:20px"> &nbsp;Sproc Details:</legend>
            <div class="col-xs-12">
                <div class="form-group col-xs-3">

                    <span>
                        Application Name <span></span>
                    </span>
                </div>
                <div class="form-group col-xs-2">
                    <span>
                        DB Name <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-3">
                    <span>
                        Schema Name <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-4">
                    <span>
                        Sproc Name <span></span>
                    </span>

                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group col-xs-3">

                    <span class="btn btn-block btn-success">
                        {{appName}} <span></span>
                    </span>
                </div>
                <div class="form-group col-xs-2">
                    <span class="btn btn-block btn-success">
                        {{dbName}} <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-3">
                    <span class="btn btn-block btn-success">
                        {{schemaName}} <span></span>
                    </span>

                </div>
                <div class="form-group col-xs-4">
                    <span class="btn btn-block btn-success">
                        {{sprocName}} <span></span>
                    </span>
                </div>
            </div>
        </fieldset>
    </div>

fieldset 的 css 是:

   .field_set {
    border: 2px white solid;
    padding: 4px;
}

当我执行此操作时:我收到这样的输出:

如您所见，它没有完全显示。

Answer 1

替换:

<legend style="font-weight:bold;font-size:20px"> &nbsp;Sproc Details:</legend>

与:

<legend style="font-weight:bold;font-size:20px;width:8%;"> &nbsp;Sproc Details:</legend>