如何在引导程序 4 中设置相同的卡片高度

Posted

技术标签:

【中文标题】如何在引导程序 4 中设置相同的卡片高度【英文标题】：How to set a same card Height in bootstrap 4 【发布时间】：2019-08-26 16:15:35 【问题描述】：

我无法让我的卡片大小相同

我一直在解决这个问题，但我根本找不到解决方案...我尝试使用 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>

这是我使用附加的代码得到的

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

【问题讨论】：

***.com/questions/35868756/… 只有列包含在.row 中。将卡片放在列中，将列放在行内 【参考方案1】：

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

查看卡片组和套牌。这些创建统一的尺寸。如果需要，您还可以查看它是如何实现的，以了解如何手动完成。

【讨论】：

欢迎来到 Stack Overflow！虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效 谢谢，我以后可以在帖子中提供更多信息。在这种情况下，我想向任何阅读的人指出，有一个内置功能可以引导/材料/最相似的框架实现相同尺寸的卡片，它们被称为卡片组和卡片组。也许这只是对 OP 的评论。【参考方案2】：

我认为在这种情况下唯一要做的就是设置一个固定的高度，例如高度：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>

【讨论】：

以上是关于如何在引导程序 4 中设置相同的卡片高度的主要内容，如果未能解决你的问题，请参考以下文章

您如何在引导程序 4 中正确断点卡片组 [重复]

如何在引导程序中设置 window.alert 样式

如何使下拉菜单的高度与引导程序4中子菜单的高度相同

引导卡头 - 所有人的高度相同

如何在禁用布局时在引导程序中设置的 Zend 控制器中回显头部链接

使用引导程序在表单组中设置输入/文本区域的宽度