Css 使引导卡完全可点击_Css_Html_Twitter Bootstrap_Bootstrap 4

Css 使引导卡完全可点击

css html twitter-bootstrap bootstrap-4

Css 使引导卡完全可点击,css,html,twitter-bootstrap,bootstrap-4,Css,Html,Twitter Bootstrap,Bootstrap 4,我无法使我的引导4卡全部可点击。我正在使用HTML5和Bootstrap 4，无法使包含的卡可点击。图像和文本是可点击的，但我希望用户能够点击框上的任何地方。我试着用一个链接包装它，卡片看起来可以点击，但它不是完全可以点击的。谢谢你的帮助 Codepen: HTML <div class="container"> <div class="card-deck flex-row flex-nowrap"> <div class="card">

我无法使我的引导4卡全部可点击。我正在使用HTML5和Bootstrap 4，无法使包含的卡可点击。图像和文本是可点击的，但我希望用户能够点击框上的任何地方。我试着用一个链接包装它，卡片看起来可以点击，但它不是完全可以点击的。谢谢你的帮助

Codepen:

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

你试过把整张卡片包装在链接标签里吗

.card容器{
最大宽度：1400px；
宽度：95%；
}
.卡体{
最大宽度：250px；
左侧填充：10px；
边际上限：0px；
过渡：.3s；
-webkit转换：.3s；
}
.卡片组{
边缘底部：3.2rem；
显示器：flex；
柔性包装：nowrap；
溢出-x：自动；
-webkit溢出滚动：触摸；
}
1.前甲板{
垫顶：12rem；
}
.卡片{
右边距：16px；
边界：无；
flex:0自动；
}
.卡。卡体：类型的第一个{
边框：2个实心#96cecf；
边框顶部：0px；
}

不用多个锚定标签，您可以将整个卡包装在锚定标签中

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

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

您的代码笔：

HTML:

似乎有很多解决方法，最常见的是将卡包装在锚定标记中或使用伪元素。有关更多信息，请参阅

以下是线程中的一个工作代码笔：

HTML

如果您不想使用锚标记（不想让a标记重新设置卡的样式），可以使用一些自定义js和样式。像这样的

$（文档）.ready（（）=>{
$（document.body）.on（'click'，'.card[data clickable=true]，（e）=>{
var href=$（e.currentTarget）.data（'href'）；
window.location=href；
});
});
.card[数据可点击=真]{
光标：指针；
}

卡片标题
2天前
在Bootstrap 4中，您可以使用拉伸链接
类，这样也不会改变卡片中文本的颜色
资料来源：
例如：
<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
。有关更多信息，请参见上面的链接。
我最喜欢这个解决方案，因为它保留在CSS参数内，并脱离了我的代码笔。我想我是因为我的幻觉错过了那一刻！我想补充一点，虽然我今天没有选择这个答案，但这是一个真正让我思考其他可能性的解决方案。作为一个还有很多东西要学的开发人员，我经常忘记我可以使用数据——并使用JS来定位数据。感谢您的回答+1000.stretched link
是一个很棒的工具，我完全错过了。谢谢.Stretch link是一种纯粹的魔法。如果你能负担得起切换到HTML5的费用，那么将链接放在卡片级别似乎就不那么麻烦了。对我来说似乎更有意义。
<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 -->

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

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

a.card {
  color: inherit;
  text-decoration: inherit;
}
a.card button {
  z-index: 1;
}

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

(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);

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