需要帮助造型引导容器与面板内的jumbotron

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”设置的宽度和高度。并将div与class =“form-group”放在容器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>