bootstrap 4 固定高度 <p> 和 <input> 的

Question

我正在 Angular2 上编辑页面，如下图所示。过渡之间存在高度差异，这对我不利。

如何通过响应式固定高度以及如何更改尺寸custom-control（切换/切换）？

    <ng-container *ngIf="!edit; then thenTemplate; else elseTemplate"></ng-container>
    <ng-template #thenTemplate>
      <div class="row col-12" *ngIf="header && value != null ">
        <strong class="col-xs-12 col-md-4">{{header}}</strong>
        <p class="col-xs-12 col-md-8">{{onValue == value ? onText : offText}}</p>
      </div>
    </ng-template>
    <ng-template #elseTemplate>
      <div class="row col-12" *ngIf="header">
        <strong class="col-xs-12 col-md-4">{{header}}</strong>
        <div class="col-xs-12 col-md-8 custom-control custom-switch ">
<!-- if add thiss works normaly style="height:2.5rem"-->
          <input type="checkbox" class="custom-control-input" id="{{key}}" (change)="onValueChanged($event)" [ngModel]="onValue">
          <label class="custom-control-label" for="{{key}}">{{onValue == value ? onText : offText}}</label>
        </div>
      </div>
    </ng-template>

https://plnkr.co/edit/y3KKE7PKyGIC6cDTQACD?p=preview

Answer 1

您可以在StackBlitz Link 中找到完整的工作示例

您只需要删除默认设置为p-tag 的默认边距。所以你的p-tag 是...

 <p class="col-xs-12 col-md-8 m-0">{{onValue == value ? onText : offText}} p</p>

所以在这里你只需要将引导边距类m-0 添加到p-tag。休息按您的要求工作。

Answer 2

设置复选框和标签后设置相同的高度。

 <div class="row col-12" *ngIf="same-height-class header && value != null ">
    <strong class="col-xs-12 col-md-4">{{header}}</strong>
    <p class="col-xs-12 col-md-8">{{onValue == value ? onText : offText}}</p>
  </div>
...
<div class="row col-12" *ngIf="header">
    <strong class="same-height-class col-xs-12 col-md-4">{{header}}</strong>
    <div class="col-xs-12 col-md-8 custom-control custom-switch ">

在css中：

.same-height-class{
  max-height: 50px!important;
}

但是如果没有其余代码和样式信息的工作示例，很难为您提供帮助。