html - boostrap4：如何按高度匹配卡片并确保正确的断点？

Question

我的卡片页脚中有一个按钮组，占用了一些空间。之前，我将每张卡片放在div这样的位置：

  <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3"></div>

但是，现在我想确保卡片的高度相同。我尝试使用卡片组来做到这一点。我能够获得正确的高度，但现在卡片彼此相邻的时间太长，并且按钮组超出了卡片。这是它的样子：

我尝试将 col-12 的内容添加到卡片标签中，如下所示：

  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col"></div>

不幸的是，这并没有做任何事情。如何实现这两个目标：按钮组的高度和足够的宽度？

特别是，我希望能够结合 Bootstrap 的网格系统使用 card-deck 的高度功能，以便列像这样开始：

||||

然后变成这样：

||
||

然后最后变成了这样：

|
|
|
|

编辑- 完整代码：

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

<div class="row card-deck">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Description</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>
</div>

解决方案

   

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
  <style>
    .card{
    height:100%;
    }
    </style>

      <div class="row">
         <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col mb-3">
      <div class="card">
      <div class="card-body">
        <h5 class="card-title"></h5>
    	<h6 class="card-subtitle mb-2 text-muted"></h6>
        <p class="card-text"></p>
      </div>
    <div class="card-footer">
    	<div class="btn-group" role="group">
    	  <button type="button" class="btn btn-primary viewActivity">View</button>
    	  <button type="button" class="btn btn-success editActivity">Edit</button>
    	  <button type="button" class="btn btn-danger deleteActivity">Delete</button>
    	</div>
      </div>
      </div>
      </div>
      </div>

标签： htmlcssbootstrap-4

Answer 1

您遇到的问题是由于.card-footer&上的默认填充.btn，您可以覆盖这些填充以获得清晰的外观，即在 576px 和 700px 之间挣扎；

下面的工作片段：

.card-footer {
  text-align: center !important;
  padding: .75rem 0 !important;
}

@media screen and (min-width:576px) and (max-width:700px) {
  .btn {
    padding: .375rem 0.3rem !important;
  }
}

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

<div class="row card-deck">
  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 card-col">
    <div class="card-body">
      <h5 class="card-title">Long Title that (we have)</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Description</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>

  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 card-col">
    <div class="card-body">
      <h5 class="card-title">Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla laborum</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>

  <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 card-col">
    <div class="card-body">
      <h5 class="card-title">Medium Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Date</h6>
      <p class="card-text">Description</p>
    </div>
    <div class="card-footer">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary viewActivity">View</button>
        <button type="button" class="btn btn-success editActivity">Edit</button>
        <button type="button" class="btn btn-danger deleteActivity">Delete</button>
      </div>
    </div>
  </div>
</div>

将样式标签放在页面中的 bootstrap.css 之后以避免放置!important（我必须将其放在这里以重新创建修复程序）

更新：根据下面提问者的评论

.card-footer {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid ">
  <div class="row ">
    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Long Title that (we have)</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Description</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>

    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla laborum</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>

    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Medium Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Description</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>

    <div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col">
      <div class="card-body">
        <h5 class="card-title">Medium Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Date</h6>
        <p class="card-text">Description</p>
      </div>
      <div class="card-footer">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary viewActivity">View</button>
          <button type="button" class="btn btn-success editActivity">Edit</button>
          <button type="button" class="btn btn-danger deleteActivity">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>