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>

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

特别是，我希望能够结合使用Cards-deck的高度功能和Bootstrap的网格系统，以使列的开头如下：

||||

然后变成这个：

||
||

然后终于变成这个了：

|
|
|
|

编辑-完整代码：

<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>

Answer 1

您遇到的问题是由于.card-footer和.btn上的默认填充而引起的，您可以覆盖这些填充以使您在挣扎的地方保持清晰的外观，即介于576px和700px之间； < / p>

工作片段如下：

.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>

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

1 个答案: