Блог

Главная - Вопросы по программированию - Нужна помощь в оформлении контейнера начальной загрузки с внутренней панелью jumbotron

Нужна помощь в оформлении контейнера начальной загрузки с внутренней панелью jumbotron

#angular #html #twitter-bootstrap-3

#angular #HTML #twitter-bootstrap-3

Вопрос:

Я хочу, чтобы форма внутри контейнера красиво вписывалась в панель 

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

Вот изображение:

введите описание изображения здесь

Комментарии:

1. Я сохранил одно выпадающее окно в коде для простоты и удобочитаемости

2. Вы понимаете, что на самом деле там нет формы, верно?

3. Итак, почему вы жестко задаете размер jumbo?

4. @MikeOne под формой я имел в виду выпадающий список и другие поля ввода внутри jumbrotron

Ответ №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>