需要帮助设计带有内部巨型板的自举容器的样式

Question

我想使容器内的表单很好地适合面板内

<div class="panel panel-primary" style="height: 657px; width: 600px; margin:auto;">

      <div class="panel-heading">A random header</div>

      <div class="panel-body">

          <div class="container">
            <div class="jumbotron" style="height: 615px; width: 600px;">


                <div class="form-group" >
                  <label attr.for="{{ 'instanceType'+ i}}">Instance Type<span class="text-danger">*</span></label>
                  <select  class="form-control" id="{{ 'instanceType'+ i}}" name="instanceType" formControlName="instanceType" required [(ngModel)]="presetInstanceType">
                    <option value={{presetInstanceType}} disabled selected>{{presetInstanceType}}</option>
                    <option>Service</option>
                  </select>
                </div>

            </div>
          </div>
      </div>
    </div>

这是图片：

Answer 1

我能够复制该问题。 要解决该问题，请删除在Div中使用class =“ jumbotron”设置的宽度和高度。并将类=“ form-group”的Div放入容器div中。

这是您的代码的外观：

            <div class="jumbotron" >
                <div class="container">
                    <div class="form-group">
                        <label attr.for="{{ 'instanceType'+ i}}">Instance Type<span class="text-danger">*</span></label>
                        <select class="form-control" id="{{ 'instanceType'+ i}}" name="instanceType" formControlName="instanceType" required [(ngModel)]="presetInstanceType">
                            <option value={{presetInstanceType}} disabled selected>{{presetInstanceType}}</option>
                            <option>Service</option>
                        </select>
                    </div>
                </div>
            </div>