Question

我正在尝试对此模板startbootstr app进行更改。对于此原始代码：

 <div class="row">
      <div class="col-md-4 mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/300x200" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">...</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/300x200" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">...</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/300x200" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">...</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>
    </div>

我使用class =“ card-footer”删除了div，以摆脱“查找更多”按钮。但是，这会在“卡片文本”下方创建一个“巨大的”空白。使用浏览器的样式检查器，我无法找到哪个css类负责卡的高度。我确实看到“ h-100”已应用于Div，但对其进行更改不会更改整体高度。从哪里控制上面的示例代码/卡的高度？ TIA

Answer 1

您在这里： JSFIDDLE 这是没有class="card-footer"的示例。

我认为您的CSS有问题

找出卡片高度以进行修改

1 个答案: