如何在Bootstrap 4中设置相同的卡高度

Question

我不能使卡片大小相同

我一直在努力解决这个问题，但我根本没有找到任何解决方法。我尝试使用h-xxx，align-items-stretch和Height：100％，但我无法使我的卡片尺寸相同，或在这种情况下相同的高度

这是我在做什么的实际代码

  <div class="content">
    <div class="container-fluid" style=" height:360px">

      <div class="row align-items-stretch ">
        <!-- DETALLES DEL PROYECTO -->

        <div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
            <div class="card-header" align="center">
                <h4 class="title">{{c.nombrep}}</h4>
              </div>


          <div class="container ">
            <div class="row">
              <div class="form-group col-md-6">
                <label id="letras" for="Nombre">Nombre del Proyecto</label>
                <input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
                  maxlength="40" size="20">
              </div>

              <div class="form-group col-md-6">
                <label for="ClienteP">Cliente</label>
                <input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
                  maxlength="20" size="20">
              </div>
            </div>

            <div class="row">

              <div class="form-group col-md-6">
                <label for="AdminP">Administrador del Proyecto</label>
                <input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
                  name="AdminP" maxlength="40" size="20">
              </div>


              <div class="form-group col-md-6">
                <label for="CodigoP">Codigo</label>
                <input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
                  id="CodigoP" name="CodigoP" maxlength="40">
              </div>

            </div>

            <div class="row">
              <div class="form-group col-md-6">
                <label for="FechaIP">Fecha de Inicio</label>
                <input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
                  disabled id="FechaIP">
              </div>
              <div class="form-group col-md-6">
                <label for="FechaCP">Fecha de Culminacion</label>
                <input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
                  disabled id="FechaCP">
              </div>
            </div>

            <div class="row justify-content-center">
              <div class="form-group  ">
                <label>Plataforma</label><br />
                <select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
                  <option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
                  <option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
                </select>
              </div>
            </div>

          </div>
        </div>

        <!-- CASOS DE PRUEBA -->


        <div class="card h-100 ml-3 d-flex " id="card">
          <div class="card-header" align="center">
            <p class="text-muted">Casos de Pruebas Creados</p>
          </div>
          <!-- <div class="header" align="center" style="padding-top:15px">
            <p class="text-muted">Casos de Pruebas Creados</p>
          </div> -->

          <div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">

            <table class="table table-hover">

              <thead class="text-black-50">
                <tr id="personalizacion">
                  <th>
                    <div class="checkbox custom-control custom-checkbox">
                      <mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
                        (change)="checkAll()"></mat-checkbox>
                      <label for="checkbox1"></label>
                    </div>
                  </th>

                  <th scope="col">Nombre del Caso</th>
                  <th scope="col">Estatus</th>
                  <th scope="col">Herramientas</th>
                </tr>
              </thead>

              <tbody *ngFor="let a of casosdeprueba; let b = index">
                <tr>
                  <td>
                    <div class="checkbox">
                      <mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
                        type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
                      <label for={{a.idcdp}}></label>
                    </div>
                  </td>

                  <!-- Esto es lo que estaba dentro del tb del nombre del caso prueba 
                    display:block;text-overflow: ellipsis;width: 150px;overflow: hidden; 
                    y fue removido dejando solo esto
                    white-space: nowrap;
                   -->
                  <td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
                  <td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
                    <button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
                  </td>
                  <td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
                    *ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
                      [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
                        class="fa fa-circle text-success pointer"></i></button>
                  </td>
                  <td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
                    *ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
                      [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
                        class="fa fa-circle text-danger pointer"></i></button>
                  </td>
                  <td *ngIf="a.proceso === 'ejecutando'">
                    <div class="loader" id="loader">Loading...</div>
                  </td>

                  <td>

                    <div class="btn-group btn-group-justified ">
                      <!--  <button  [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->

                      <button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
                          class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
                          description
                        </i></button>

                      <button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
                          mat-raised-button matTooltip="Descripción" class="material-icons pointer">
                          remove_red_eye
                        </i></button>

                    </div>
                    <div class="btn-group btn-group-justified ">

                      <button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
                          mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
                          create
                        </i></button>
                      <button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
                          mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
                          file_copy
                        </i></button>
                      <button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
                          matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
                          delete
                        </i></button>

                    </div>



                  </td>

                </tr>
              </tbody>

            </table>

          </div>
          <div class="card-footer text-muted text-center">
            <div class="btn-group btn-group-justified ">
              <!--  <button  [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->

              <button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
                  matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
                  directions_run
                </i></button>
              <button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
                  matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
                  directions_run
                </i></button>

              <button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
                <i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
                  class="material-icons pointer">
                  alarm
                </i></button>
              <button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
                  matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
                  alarm
                </i></button>

              <button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
                  mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
                  add_circle
                </i></button>
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
                  </button>

            </div>
          </div>
        </div>
    </div>
  </div>

这是我附带的代码所得到的

但是我需要两张高度相同的卡片，当我向桌子上添加更多物品时，itef就会出现问题，因为它开始增长，并且超过了左侧卡片的高度，如果设置了静态高度，则卡片会丢失响应功能

Answer 1

我认为在这种情况下，唯一的事情就是设置一个固定的高度，例如height：500px或50vh。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
  .align-items-stretch.row {
    height: 50vh;
  }

</style>
<div class="content">
    <div class="container-fluid" style=" height:360px">

      <div class="row align-items-stretch ">
        <!-- DETALLES DEL PROYECTO -->

        <div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
            <div class="card-header" align="center">
                <h4 class="title">{{c.nombrep}}</h4>
              </div>


          <div class="container ">
            <div class="row">
              <div class="form-group col-md-6">
                <label id="letras" for="Nombre">Nombre del Proyecto</label>
                <input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
                  maxlength="40" size="20">
              </div>

              <div class="form-group col-md-6">
                <label for="ClienteP">Cliente</label>
                <input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
                  maxlength="20" size="20">
              </div>
            </div>

            <div class="row">

              <div class="form-group col-md-6">
                <label for="AdminP">Administrador del Proyecto</label>
                <input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
                  name="AdminP" maxlength="40" size="20">
              </div>


              <div class="form-group col-md-6">
                <label for="CodigoP">Codigo</label>
                <input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
                  id="CodigoP" name="CodigoP" maxlength="40">
              </div>

            </div>

            <div class="row">
              <div class="form-group col-md-6">
                <label for="FechaIP">Fecha de Inicio</label>
                <input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
                  disabled id="FechaIP">
              </div>
              <div class="form-group col-md-6">
                <label for="FechaCP">Fecha de Culminacion</label>
                <input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
                  disabled id="FechaCP">
              </div>
            </div>

            <div class="row justify-content-center">
              <div class="form-group  ">
                <label>Plataforma</label><br />
                <select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
                  <option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
                  <option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
                </select>
              </div>
            </div>

          </div>
        </div>

        <!-- CASOS DE PRUEBA -->


        <div class="card h-100 ml-3 d-flex " id="card">
          <div class="card-header" align="center">
            <p class="text-muted">Casos de Pruebas Creados</p>
          </div>
          <!-- <div class="header" align="center" style="padding-top:15px">
            <p class="text-muted">Casos de Pruebas Creados</p>
          </div> -->

          <div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">

            <table class="table table-hover">

              <thead class="text-black-50">
                <tr id="personalizacion">
                  <th>
                    <div class="checkbox custom-control custom-checkbox">
                      <mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
                        (change)="checkAll()"></mat-checkbox>
                      <label for="checkbox1"></label>
                    </div>
                  </th>

                  <th scope="col">Nombre del Caso</th>
                  <th scope="col">Estatus</th>
                  <th scope="col">Herramientas</th>
                </tr>
              </thead>

              <tbody *ngFor="let a of casosdeprueba; let b = index">
                <tr>
                  <td>
                    <div class="checkbox">
                      <mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
                        type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
                      <label for={{a.idcdp}}></label>
                    </div>
                  </td>

                  <!-- Esto es lo que estaba dentro del tb del nombre del caso prueba 
                    display:block;text-overflow: ellipsis;width: 150px;overflow: hidden; 
                    y fue removido dejando solo esto
                    white-space: nowrap;
                   -->
                  <td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
                  <td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
                    <button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
                  </td>
                  <td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
                    *ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
                      [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
                        class="fa fa-circle text-success pointer"></i></button>
                  </td>
                  <td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
                    *ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
                      [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
                        class="fa fa-circle text-danger pointer"></i></button>
                  </td>
                  <td *ngIf="a.proceso === 'ejecutando'">
                    <div class="loader" id="loader">Loading...</div>
                  </td>

                  <td>

                    <div class="btn-group btn-group-justified ">
                      <!--  <button  [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->

                      <button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
                          class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
                          description
                        </i></button>

                      <button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
                          mat-raised-button matTooltip="Descripción" class="material-icons pointer">
                          remove_red_eye
                        </i></button>

                    </div>
                    <div class="btn-group btn-group-justified ">

                      <button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
                          mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
                          create
                        </i></button>
                      <button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
                          mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
                          file_copy
                        </i></button>
                      <button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
                          matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
                          delete
                        </i></button>

                    </div>



                  </td>

                </tr>
              </tbody>

            </table>

          </div>
          <div class="card-footer text-muted text-center">
            <div class="btn-group btn-group-justified ">
              <!--  <button  [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->

              <button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
                  matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
                  directions_run
                </i></button>
              <button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
                  matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
                  directions_run
                </i></button>

              <button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
                <i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
                  class="material-icons pointer">
                  alarm
                </i></button>
              <button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
                  matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
                  alarm
                </i></button>

              <button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
                  mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
                  add_circle
                </i></button>
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
                  </button>

            </div>
          </div>
        </div>
    </div>
  </div>

Answer 2

https://getbootstrap.com/docs/4.0/components/card/#card-groups https://getbootstrap.com/docs/4.0/components/card/#card-decks

签出卡组和卡片组。这些创建统一的大小。您还可以研究如何实现此功能，以了解如何根据需要手动进行操作。