使Bootstrap卡完全可点击

Question

我在使整个Bootstrap 4卡可点击时遇到麻烦。我正在使用HTML5和Bootstrap 4，无法使包含的卡可点击。图像和文本是可单击的，但是我希望用户能够在框中的任何位置单击。我尝试用链接包装它，该卡片看起来可点击，但并非完全可以。感谢帮助

Codepen： https ：//codepen.io/anon/pen/PVNXgV

的HTML

<div class="container">
  <div class="card-deck flex-row flex-nowrap">

    <div class="card">
      <a href="http://google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap"></a>

      <a href="http://google.com">
        <!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
        <div class="card-body">
          <a href="http://google.com"><h3 class="card-sub align-middle">Card Title</h3></a>
          <p class="time-card">2 Days Ago</p>
        </div><!-- END CARD-BODY -->
      </a>
    </div><!-- END CARD -->

    </div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->

的CSS

.card-container{
  max-width:1400px;
  width:95%;
}

.card-body{
  max-width:250px;
  padding-left:10px;
  margin-top:0px;
  transition:.3s;
  -webkit-transition:.3s;
}

.card-deck{
  margin-bottom:3.2rem;
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.front-deck{
  padding-top:12rem;
}

.card{
  margin-right:16px;
  border:none;
  flex: 0 0 auto;
}

.card .card-body:first-of-type{
  border:2px solid #96cecf;
  border-top:0px; 
}

Answer 1

在 Bootstrap 4 中，你可以使用stretched-linkclass，它也不会改变卡片中文本的颜色。

来源：https : //getbootstrap.com/docs/4.3/utilities/stretched-link/#identifying-the- contains-block

例子：

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

记住.position-relative在大多数情况下添加到父类。有关更多信息，请参阅上面的链接。

Answer 2

你的代码笔：https ://codepen.io/brooksrelyt/pen/VgjzGr

HTML：

<div class="container">
  <div class="card-deck flex-row flex-nowrap">
<a href="http://google.com">
    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap">


        <!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
        <div class="card-body">
<h3 class="card-sub align-middle">Card Title</h3>
          <p class="time-card">2 Days Ago</p>
        </div><!-- END CARD-BODY -->
      </a>
    </div><!-- END CARD -->
  </a>

    </div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->

Answer 3

如果您不想使用锚标签（不希望其标签改变卡的样式），则可以使用一些自定义js和样式。这样的事情。

$(document).ready(() => {
  $(document.body).on('click', '.card[data-clickable=true]', (e) => {
    var href = $(e.currentTarget).data('href');
    window.location = href;
  });
});

.card[data-clickable=true]{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
  <div class="card-deck flex-row flex-nowrap">

    <div class="card" data-clickable="true" data-href="http://google.com">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap">


      <!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
      <div class="card-body">
        <h3 class="card-sub align-middle">Card Title</h3>
        <p class="time-card">2 Days Ago</p>
      </div>
      <!-- END CARD-BODY -->

    </div>
    <!-- END CARD -->

  </div>
  <!-- END CARD DECK -->
</div>
<!-- END CONTAINER -->