Question

我正在创建一个应用程序，需要一张卡片作为超链接以及一个单独的按钮。因此，当我单击卡时，它必须作为超链接工作当我单击按钮时，它必须引发另一个事件。我该怎么办？

下面是我的代码

<div class="" style="background-color:#F2F3F7;">
    <div class="container">
        <div class="card-deck">
          <a href= "#" class="card mb-3">
            <b-img-lazy class="card-img-top" src="#" alt="Card image cap" />
            <div class="card-body">
              <h5 class="card-title">Bummy</h5>
              <p class="card-text">Lorem Ipsum</p>
            </div>
            <div class="card-footer text-muted bg-white">
              <b-button size="sm" class="btn-block get-quotes">Click me</b-button>
            </div>
          </a>         
        </div>
    </div>
  </div>

Answer 1

您需要这样吗？

a {
  text-decoration: none !important;
  color: inherit !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<a href="javascript:void(0)">
  <div class="card">
    <img class="card-img-top" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</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 mt-3">Go somewhere</a>
    </div>
  </div>
</a>

Answer 2

z-index属性是“ z-index较大的元素覆盖那些较小的元素”。因此，尝试：

<b-button size="sm" class="btn-block get-quotes" style="z-index: 99;">Click me</b-button>

它应该可以工作。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Bootstrap Card与按钮一起作为超链接吗？

2 个答案: