如何使用BootStrap实现此表单的移动响应行为？

Question

我正在使用BootStrap开发一个web应用程序，我有以下问题。在视图(模态)中，我定义了以下形式：

  <form [formGroup]="newPatientForm" id="addPatientForm" (ngSubmit)=saveNewPatient()>
    
        <div class="row">
            <div class="col-2">
              <p>Nome</p>
            </div>
            <div class="col-10">
                <input id="firstName" formControlName="firstName" type="text" pInputText />
            </div>
        </div>

        <div class="row">
          <div class="col-2">
            <p>Cognome</p>
          </div>
          <div class="col-10">
              <input id="surname" formControlName="surname" type="text" pInputText />
          </div>
        </div>

        <div class="row">
          <div class="col-2">
            <p>Data di nascita</p>
          </div>
          <div class="col-10" [ngClass]="{'ng-pristine ng-invalid ng-touched': isEmptyDate}">
            <p-calendar [ngClass]="{'invalid-date': isValidDate}"
                        id="birthDate" 
                        [(ngModel)]="birthDateNg"
                        inputId="birthDate"
                        formControlName="birthDate"
                        >
            </p-calendar>
          </div>
        </div>

        <div class="row">
          <div class="col-2">
            <p>Luogo di nascita</p>
          </div>
          <div class="col-10">
              <input id="placeOfBirth" formControlName="placeOfBirth" type="text" pInputText />
          </div>
        </div>

        <div class="row">
          <div class="col-2">
            <p>Codice fiscale</p>
          </div>
          <div class="col-10">
              <input id="socialSecurityCode" formControlName="socialSecurityCode" type="text" pInputText />
          </div>
        </div>


        <div class="row">
          <div class="col-2">
            <p>E-mail</p>
          </div>
          <div class="col-10">
              <input id="personalEmail" formControlName="personalEmail" type="text" pInputText />
          </div>
        </div>


        <div class="row">
          <div class="col-2">
            <p>Telefono</p>
          </div>
          <div class="col-10">
              <input id="personalPhone" formControlName="personalPhone" type="text" pInputText />
          </div>
        </div>

        <div class="row">
          <div class="col-2">
            <p>Professione</p>
          </div>
          <div class="col-10">
              <input id="occupation" formControlName="occupation" type="text" pInputText />
          </div>
        </div>

        <p-footer>
          <span class="p-buttonset">
            <button pButton 
                    type="submit"
                    label="Save" 
                    icon="pi pi-check"
                    [disabled]="!newPatientForm.valid">
            </button>
            <button pButton type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog()"></button>
        </span>
        </p-footer>
               
  </form>

在桌面模式下呈现它没有问题，它是以预期的方式呈现的：

​

​

但移动模式下的渲染非常丑陋，而且完全没有响应性：

​

​

我如何适应它，以作出反应和良好的外观在移动？引导在移动可视化中为列宽度提供了一些额外的类，或者类似的东西？

Answer 1

行应该始终在容器中。

<form [formGroup]="newPatientForm" id="addPatientForm" (ngSubmit)=saveNewPatient()>
    <div class="container">
        //other codes you wrote
    </div>
 </form>

Answer 2

引导程序为移动屏幕和大屏幕提供了独立的类，因此您必须添加更多的类来解决移动问题。

-12：它将在移动屏幕和大屏幕上提供全宽度

col*它将在大屏幕上调整大小

试试下面的代码来解决你的问题.

 <form [formGroup]="newPatientForm" id="addPatientForm" (ngSubmit)=saveNewPatient()>
     <div class="container">
        <div class="row">
            <div class="col-12 col-md-2">
              <p>Nome</p>
            </div>
            <div class="col-12 col-md-10">
                <input id="firstName" formControlName="firstName" type="text" pInputText />
            </div>
        </div>

        <div class="row">
          <div class="col-12 col-md-2">
            <p>Cognome</p>
          </div>
          <div class="col-12 col-md-10">
              <input id="surname" formControlName="surname" type="text" pInputText />
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-md-2">
            <p>Data di nascita</p>
          </div>
          <div class="col-12 col-md-10" [ngClass]="{'ng-pristine ng-invalid ng-touched': isEmptyDate}">
            <p-calendar [ngClass]="{'invalid-date': isValidDate}"
                        id="birthDate" 
                        [(ngModel)]="birthDateNg"
                        inputId="birthDate"
                        formControlName="birthDate"
                        >
            </p-calendar>
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-md-2">
            <p>Luogo di nascita</p>
          </div>
          <div class="col-12 col-md-10">
              <input id="placeOfBirth" formControlName="placeOfBirth" type="text" pInputText />
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-md-2">
            <p>Codice fiscale</p>
          </div>
          <div class="col-12 col-md-10">
              <input id="socialSecurityCode" formControlName="socialSecurityCode" type="text" pInputText />
          </div>
        </div>


        <div class="row">
          <div class="col-12 col-md-2">
            <p>E-mail</p>
          </div>
          <div class="col-12 col-md-10">
              <input id="personalEmail" formControlName="personalEmail" type="text" pInputText />
          </div>
        </div>


        <div class="row">
          <div class="col-12 col-md-2">
            <p>Telefono</p>
          </div>
          <div class="col-12 col-md-10">
              <input id="personalPhone" formControlName="personalPhone" type="text" pInputText />
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-md-2">
            <p>Professione</p>
          </div>
          <div class="col-12 col-md-10">
              <input id="occupation" formControlName="occupation" type="text" pInputText />
          </div>
        </div>

        <p-footer>
          <span class="p-buttonset">
            <button pButton 
                    type="submit"
                    label="Save" 
                    icon="pi pi-check"
                    [disabled]="!newPatientForm.valid">
            </button>
            <button pButton type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog()"></button>
        </span>
        </p-footer>
</div>
               
  </form>