Нужна помощь в оформлении бутстрэп контейнера с 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>