使引导卡完全可点击

Posted

技术标签:

【中文标题】使引导卡完全可点击【英文标题】：Make Bootstrap Card Entirely Clickable 【发布时间】：2019-06-21 15:00:19 【问题描述】：

我无法让我的整个 Bootstrap 4 Card 可点击。我正在使用 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" ></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;

【问题讨论】：

【参考方案1】：

在 Bootstrap 4 中，您可以使用 stretched-link 类，这也不会改变卡片中文本的颜色。

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

例子：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" >
  <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 添加到父类。有关详细信息，请参阅上面的链接。

【讨论】：

+1000 .streched-link 是一个很棒的实用程序，我完全错过了它。 谢谢。 .stretched-link 是纯粹的巫术。 当您有能力切换到 HTML5 时，将链接放在卡片级别似乎不那么难了。对我来说似乎更具语义化。【参考方案2】：

如果您不想使用锚标签（不希望它让 a 标签重新设置卡片的样式），您可以使用一些自定义 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" >


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

【讨论】：

我想补充一下，虽然我今天没有选择这个答案，但这是一个真正让我思考其他可能性的解决方案。作为一个还有很多东西要学习的开发人员，我经常忘记我可以使用数据并使用 JS 来定位它。感谢回答！【参考方案3】：

您的密码笔：https://codepen.io/***srelyt/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" >


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

【讨论】：

我最喜欢这个解决方案，因为它保持在 CSS 参数范围内并且从我的 codepen 中分离出来。我想我有隧道视野错过了这一点！【参考方案4】：

您是否尝试过将整张卡片包装在链接标签中？ 

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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" >
        <!-- 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 -->
   </a>
    </div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->

【讨论】：

【参考方案5】：

您可以将整个卡片包装在一个锚标签中，而不是使用多个锚标签。

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


            <!-- 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 -->
        </a>
      </div><!-- END CARD DECK -->

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

【讨论】：

【参考方案6】：

似乎有许多解决方法，最常见的是将卡片包装在锚标记中或使用伪元素。请参阅https://github.com/twbs/bootstrap/issues/18294 了解更多信息。

这也是来自线程的工作代码笔：https://codepen.io/blazejewicz/pen/OQEeLR/?editors=0100。

HTML 

  <a class="card" href="#" style="width: 18rem;">
  <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161beea174e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161beea174e%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3984375%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" >
  <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>

  </div>
</a>
</div>

CSS

a.card 
  color: inherit;
  text-decoration: inherit;

a.card button 
  z-index: 1;


a.card.disabled,
a.card[disabled] 
  pointer-events: none;
  opacity: .8;

JS

(function($) 
  $(() => 
    $('button').on('click', (event) => 
      event.stopImmediatePropagation();
      event.preventDefault();
      alert(`$event.type: $event.currentTarget.tagName`);
    );

    $('a').on('click', (event) => 
      event.preventDefault();
      alert(`$event.type: $event.currentTarget.tagName`);
    );
  );
)(jQuery);

【讨论】：

以上是关于使引导卡完全可点击的主要内容，如果未能解决你的问题，请参考以下文章

使用清晰的背景颜色使 UIButton 内容完全可点击

使 Emacs 选项卡的行为与 vim 完全相同

如何使引导表行可点击？ [复制]

如何以完全响应的方式在中心执行此引导搜索框？

如何使整个引导程序缩略图可点击（适用于手机和平板电脑）

如何使整个产品项目卡可点击