具有两列和三个卡片 ui 元素的相同高度

Posted 2023-03-05

【中文标题】具有两列和三个卡片 ui 元素的相同高度

【英文标题】：Same height with two columns and three card ui elements

【发布时间】：2021-10-02 12:56:48

【问题描述】：

我正在使用 Bootstrap 4。如图所示，我的网格是 2 列中的 1 行和 3 个卡片元素。我不知道如何将蓝卡 UI 的空白区域保留到黄卡 UI 结束的同一行。

我希望它们具有相同的高度。我已阅读 this 但没有成功，我尝试了以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="card card-info">
        <div class="card-header">
          <h3 class="card-title">Mi título</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                        </button>
          </div>
        </div>
        <div id="texto-inicio" class="card-body">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non hic vero quae assumenda animi provident quis, est cumque at aspernatur doloribus incidunt fugiat alias rerum doloremque, aliquid sed nesciunt corporis? Lorem ipsum dolor sit, amet consectetur
          adipisicing elit. Accusamus atque, dolor deleniti perspiciatis, aut ullam culpa praesentium ab optio eveniet, ut quidem accusantium est maiores quas provident. Optio, culpa a.
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-success">
        <div class="card-header">
          <h3 class="card-title">Mi título</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                        </button>
          </div>
        </div>
        <div id="texto-inicio" class="card-body">
          <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
        </div>
      </div>
      <div class="card card-warning">
        <div class="card-header">
          <h3 class="card-title">Mi titulo</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                        </button>
          </div>
        </div>
        <div id="texto-inicio" class="card-body">
          <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
        </div>
      </div>
    </div>
  </div>
</div>

【参考方案1】：

将h-100添加到您想要拥有整个高度的卡片。

只需更新您的 html

<div class="container-fluid">
  <div class="row">
      <div class="col-md-8">
          <div class="card card-info h-100">
              <div class="card-header">
                  <h3 class="card-title">Mi título</h3>
                  <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div id="texto-inicio" class="card-body">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non hic vero quae assumenda animi provident quis, est cumque at aspernatur doloribus incidunt fugiat alias rerum doloremque, aliquid sed nesciunt corporis?
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus atque, dolor deleniti perspiciatis, aut ullam culpa praesentium ab optio eveniet, ut quidem accusantium est maiores quas provident. Optio, culpa a.
              </div>
          </div>
      </div>
      <div class="col-md-4">
          <div class="card card-success">
              <div class="card-header">
                  <h3 class="card-title">Mi título</h3>
                  <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div id="texto-inicio" class="card-body">
                  <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
              </div>
          </div>
          <div class="card card-warning">
              <div class="card-header">
                  <h3 class="card-title">Mi titulo</h3>
                  <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                  </div>
              </div>
              <div id="texto-inicio" class="card-body">
                  <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti veritatis placeat non, culpa autem mollitia neque consequuntur, tempore tempora possimus eius reiciendis minima nemo obcaecati, recusandae itaque veniam error nam!</p>
                  </p>
              </div>
          </div>
      </div>
  </div>
</div>