Неправильное выравнивание столбцов на экране с помощью bootsrap 4

Question

Я реализую пользовательский интерфейс для приложения angular 7 с использованием начальной загрузки. Форма пользовательского интерфейса содержит четыре элемента в строке. У вас есть метка и контроль ввода слева и аналогичные справа. Поэтому я попытался установить col-md-2 для меток и col-md-3 для обеих форм. Когда я это делаю, справа есть место, и я полагаю, что это потому, что общее количество составляет 10 столбцов Если я увеличу ввод левой и правой стороны на 1, то есть col-md-4, крайний правый элемент управления коснется границы. Мне нужно, чтобы левый и правый были равны с небольшим запасом на левой и правой стороне границы.

Мне удалось создать стекаблитц, чтобы повторить проблему. Также решили проблему правильного расстояния. Вы можете видеть, что стиль прокомментирован на stackblitz. Как создать интервал между элементами управления, так как на данный момент он слишком загроможден. Также я хочу, чтобы это выглядело сложенным на маленьком экране. Пожалуйста, смотрите обновленный скриншот ниже для справки. Его помечены Обновленный вывод

stackblitz.com / edit / angular-uypvsy

Вот скриншоты

с col-md-3

С cold-md-4, только что примененным к первому ряду

HTML-код

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card">
  <div class="card-header panel-heading">
    <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
    <div class="pull-right" style="padding-right:10px;">
      <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
                    <input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>

    </div>
  </div>
  <div class="card-body">
    <div *ngIf="FundDetails" class="card-body" style="width:100%">

      <div class="form-group row">

        <label for="inputName" class="col-md-2  col-sm-11 col-form-label modal-label header">Name</label>
        <div class="col-md-4 col-sm-11 ">
          <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
          <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
        </div>

        <label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
        <div class="col-md-4 col-sm-11">
          <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
          <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
          </kendo-dropdownlist>
        </div>

      </div>

      <div class="form-group row">
        <label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
        <div class="col-md-3 col-sm-11">
          <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
          <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
        </div>


        <label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>

        <div class="col-md-3 col-sm-11">
          <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
          <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
          </kendo-dropdownlist>
        </div>

      </div>

      Updated html based on suggestion

      <div class="card">
        <div class="card-header panel-heading">
          <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
          <div class="pull-right" style="padding-right:10px;">
            <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
                    <input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>

          </div>
        </div>
        <div class="card-body">
          <div *ngIf="FundDetails" class="card-body" style="width:100%">

            <div class="form-row">

              <label for="inputName" class="col-md-2  col-form-label modal-label header">Name</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
                <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
              </div>

              <label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            <div class="form-row">
              <label for="inputTitle" class="col-md-2  col-form-label header">Make Anonymous</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
                <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
              </div>


              <label for="inputEmail" class="col-md-2  col-form-label header">Flagship</label>

              <div class="col-md-3 ">
                <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            <div class="form-row">

              <!-- <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{formatInceptionDate}}</div>
                        <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
                        </kendo-datepicker>
                    </div> -->

              <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
                <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
                </kendo-datepicker>
              </div>


              <label for="inputEmail" class="col-md-2  col-form-label header">Account Mandate</label>
              <div class="col-md-4 ">
                <div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>


            <div class="form-row">
              <label for="inputEmail" class="col-md-2  col-form-label header">Vehicle Type</label>
              <div class="col-md-4 ">
                <div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
                  valueField="ID">
                </kendo-dropdownlist>
              </div>



              <label for="inputEmail" class="col-md-2  col-form-label header">Bloomberg Ticker</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
                <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
              </div>

            </div>


            <div class="form-row">

              <label for="inputEmail" class="col-md-2  col-form-label header">Primary Class</label>
              <div class="col-md-4">
                <div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>



            </div>




            <div class="form-row">

              <div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
                <div class="desc-header">Details</div>
                <div class="divEditor">
                  <ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
                  </ckeditor>
                  <div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
                  </div>
                </div>
              </div>
            </div>





          </div>
          <div class="btn-toolbar" style="padding-top:40px;">
            <!-- <span> <button class="btn btn-default btn mr-3">
                        <i class="fa fa-file-pdf-o"></i>
                        View Fund Snapshot
                    </button>
                </span> -->

            <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="updateFund()">Save</button>
    
                </span>
            <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="cancelFund">Cancel</button>
                </span>
            <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
                        (click)="deleteFund()">Delete</button>
                </span>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header panel-heading">
          <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
          <div class="pull-right" style="padding-right:10px;">
            <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
                    <input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>

          </div>
        </div>
        <div class="card-body">
          <div *ngIf="FundDetails" class="card-body" style="width:100%">

            <div class="form-group row">

              <label for="inputName" class="col-md-2  col-sm-11 col-form-label modal-label header">Name</label>
              <div class="col-md-4 col-sm-11 ">
                <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
                <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
              </div>

              <label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
              <div class="col-md-4 col-sm-11">
                <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            <div class="form-group row">
              <label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
              <div class="col-md-3 col-sm-11">
                <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
                <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
              </div>


              <label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>

              <div class="col-md-3 col-sm-11">
                <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
                <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                </kendo-dropdownlist>
              </div>

            </div>

            Updated html based on suggestion

            <div class="card">
              <div class="card-header panel-heading">
                <span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
                <div class="pull-right" style="padding-right:10px;">
                  <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
                    <input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>

                </div>
              </div>
              <div class="card-body">
                <div *ngIf="FundDetails" class="card-body" style="width:100%">

                  <div class="form-row">

                    <label for="inputName" class="col-md-2  col-form-label modal-label header">Name</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
                      <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
                    </div>

                    <label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>

                  </div>

                  <div class="form-row">
                    <label for="inputTitle" class="col-md-2  col-form-label header">Make Anonymous</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
                      <label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
                                value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
                                style="width: 13px; height: 13px;" />&nbsp;&nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
                    </div>


                    <label for="inputEmail" class="col-md-2  col-form-label header">Flagship</label>

                    <div class="col-md-3 ">
                      <div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>

                  </div>

                  <div class="form-row">

                    <!-- <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{formatInceptionDate}}</div>
                        <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
                        </kendo-datepicker>
                    </div> -->

                    <label for="inputFax" class="col-md-2  col-form-label header">Inception Date</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
                      <kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
                      </kendo-datepicker>
                    </div>


                    <label for="inputEmail" class="col-md-2  col-form-label header">Account Mandate</label>
                    <div class="col-md-4 ">
                      <div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>

                  </div>


                  <div class="form-row">
                    <label for="inputEmail" class="col-md-2  col-form-label header">Vehicle Type</label>
                    <div class="col-md-4 ">
                      <div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
                        valueField="ID">
                      </kendo-dropdownlist>
                    </div>



                    <label for="inputEmail" class="col-md-2  col-form-label header">Bloomberg Ticker</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
                      <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
                    </div>

                  </div>


                  <div class="form-row">

                    <label for="inputEmail" class="col-md-2  col-form-label header">Primary Class</label>
                    <div class="col-md-4">
                      <div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
                      <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
                      </kendo-dropdownlist>
                    </div>



                  </div>




                  <div class="form-row">

                    <div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
                      <div class="desc-header">Details</div>
                      <div class="divEditor">
                        <ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
                        </ckeditor>
                        <div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
                        </div>
                      </div>
                    </div>
                  </div>





                </div>
                <div class="btn-toolbar" style="padding-top:40px;">
                  <!-- <span> <button class="btn btn-default btn mr-3">
                        <i class="fa fa-file-pdf-o"></i>
                        View Fund Snapshot
                    </button>
                </span> -->

                  <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="updateFund()">Save</button>
    
                </span>
                  <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
                        (click)="cancelFund">Cancel</button>
                </span>
                  <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
                        (click)="deleteFund()">Delete</button>
                </span>
                </div>
              </div>
            </div>

Обновлен вывод на основе предложения на большом экране

Обновлен вывод на основе предложения на маленьком экране

Answer 1

Просто удаляя или комментируя заголовок , класс значительно улучшается в мобильном представлении:

С другой стороны, есть div вроде <div *ngIf ="IsVehicleDependent">которые ведут себя как столбцы, даже если у них нет класса col-sm -....Я изучаю ReactJS и для этих случаев есть <React.Fragment>.Я искал что-то похожее для Angular и нашел <ng-container>.Я применил его и улучшил вид рабочего стола.

Answer 2

Вам необходимо добавить адаптивное правило CSS к .header элементам. Я вижу, что они установлены на width: 8%; в настоящее время, что выглядит хорошо, когда макет является широким, но идет коротко на узкой ширине. Измените ширину на 100%, и это на самом деле выглядит хорошо. Примерно так:

@media (max-width: 'YOUR_BREAKPOINT_WIDTH_HERE') {
  .header {
    width: 100%;
  }
}

Answer 3

Без проведения теста с самим углом и просмотра кода я бы изменил "строка группы форм" на "строка-формы" .Это также исключило бы "col-sm-11" .И, кроме того, закройте как минимум 3 div ().Структура должна быть примерно такой:

<div class="card">
    <div class="card-header panel-heading">
        Fund Details
    </div>
    <div class="card-body">
        <div *ngIf="FundDetails">
            <div class="form-row">
                <label class="col-md-2 col-form-label">Label 1</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 1">
                </div>
                <label class="col-md-2 col-form-label">Label 2</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 2">
                </div>
            </div>
            <div class="form-row">
                <label class="col-md-2 col-form-label">Label 3</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 3">
                </div>
                <label class="col-md-2 col-form-label">Label 4</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" value="Input 4">
                </div>
            </div>
        </div>
    </div>
</div>

С другой стороны, понадобятся ли два DIV с классом "card-body"?