使用引导卡作为超链接答案

【问题标题】：Using bootstrap cards as a hyperlink使用引导卡作为超链接
【发布时间】：2018-09-08 07:02:45
【问题描述】：

我有一张引导卡，用作链接。

尝试用<a> 包裹它会改变卡片的所有样式。

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

  <div class="card" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Normal card</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>

<a href="">
  <div class="card" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Wrapped with a tag</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>

</a>

我应该如何包装卡片以保持其外观并将其用作链接？

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

尝试将 Display: Block 添加到链接本身。使用浏览器开发者工具 (F12) 并将鼠标悬停在链接上，看看是否需要添加 Height:auto。

【讨论】：

为什么会有帮助？
这将强制链接环绕多个元素。

【解决方案2】：

您可以将text-dark 实用程序类添加到元素以具有相同的外观。

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

<a href="">
  <div class="card text-dark" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Wrapped with a tag</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</a>

【讨论】：

小问题：如果删除“display: inline-block”，悬停会有下划线...

【解决方案3】：

您可以使用<a> 代替<div> 作为卡片元素，而不是将.card 包装在<a> 中。

这将允许您轻松覆盖 CSS 以删除默认的 <a> 样式：

a.card,
a.card:hover {
  color: #212529;
  text-decoration: none;
}

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

<div class="card" style="width: 15rem; display: inline-block">
  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Normal card</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<a href="#" class="card" style="width: 15rem; display: inline-block">
  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Wrapped with a tag</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</a>

【讨论】：

这对我有用。对我来说，将 .card div 包装在 <a> 元素中会破坏卡片的某些样式（它似乎覆盖了 d-flex align-items-stretch应用于包含列 <div>。此方法不会这样做。

【解决方案4】：

这是因为<a> 标签在用户代理浏览器中具有默认的蓝色。尝试在链接中添加一个类并将color:inherit 设置为该类

a.custom-card,
a.custom-card:hover {
  color: inherit;
}

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

<div class="card" style="width: 15rem; display: inline-block">
  <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Normal card</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<a href="" class="custom-card">
  <div class="card" style="width: 15rem; display: inline-block">
    <img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Wrapped with a tag</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</a>

【讨论】：

根据 w3schools 的说法，已转换为块元素的内联元素不能在其内部包含块元素。此页面上的注意事项：w3schools.com/css/css_display_visibility.asp。考虑到这一点，是否建议为卡片设置一个锚标记，该标记可能包含块元素，例如其中的

【解决方案5】：

如果您使用的是 Bootstrap 4.3，则不必使用 <a> 标签包装卡片，而是将其放在 card-body 中，并使用 stretched-link 类。这是更清洁的方式。

访问https://getbootstrap.com/docs/4.3/utilities/stretched-link/了解更多详情。

如果您不能使用 Bootstrap 4.3，这是 stretched-link 类的样式：

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

示例如下：

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

  <div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
  <h5 class="card-title">Normal card</h5>
  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
  </div>


  <div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
  <h5 class="card-title">Alternative</h5>
  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  <a href="#" class="stretched-link"></a>
</div>
  </div>

【讨论】：

Bootstrap 4.3 的最佳答案，比所有其他替代方案更容易！
最佳答案。不需要其他任何东西。
我使用的是.stretched-link，但我需要切换到 Bootstrap 4.3。谢谢。
但是如果没有 href 属性，这是行不通的。如果你使用像 Angular 这样的框架并通过绑定实现点击，那么 href 是一个问题
适用于 Patternfly v3 卡片，如果您在 CSS 中实现拉伸链接类并将其放在卡片 div 内的链接上。

【解决方案6】：

Stretched link 非常简单

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

【讨论】：

【解决方案7】：

我遇到了同样的问题。我用这个技巧修复了它。您可以指定任何您喜欢的颜色，并在颜色代码的末尾放置一个 00 以使其透明，这样您就可以使样式不可见。例如

<a href="" style="color: #83577500; ">

【讨论】：

【解决方案8】：

只需添加“光标：指针；”适合你的风格

【讨论】：

首先，这不是问题的有效答案。然后，您要回答的问题已经超过 2 年，并且已经有一个可接受的答案。
这个答案是......我猜你测试'它是如何工作的' - 如果你可以（不确定） - 删除这个答案进行测试。它可能是一个评论，而不是一个答案——即使它很精彩，它也不能解释任何事情

【解决方案9】：

bootstrap 使用Stretched link 轻松实现

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

【讨论】：