javascript - 使 Bootstrap 链接正常工作

Question

我制作了一张 Bootstrap 卡，并在创建它之后。我需要该卡链接到另一个页面，并且不影响卡内的书签按钮。我希望整个卡片成为另一个页面的链接，在应用“a”标签时，它破坏了卡片的整体样式。在尝试时，我尝试了另一种方法，但效果不佳，因为它也影响了卡片中的书签按钮。拜托，我试图在没有 jquery 的情况下完成这项工作，因为它不能很好地与 React 配合使用，但纯 javascript 就可以了。

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

<div class="container-fluid card__layout">

      <div class="card mb-4 project__card">
        <img class="card-img-top" src="img/one.jpg" alt="">
        <div class="card-block">
          <h6 class="card-title text-center text-truncate card__header card__header__green">Front-End Programmer</h6>
          <p class="card-text text-center card__content__ellipsis">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          <div class="card__project__bookmark__styling">
            <a href="#" class="card__gig__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmark</a>
          </div>
          <!--- if bookmarked - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          <div class="card__project__bookmark__styling card__bookmarked">
            <a href="#" class="card__project__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmarked</a>
          </div>
          --------------------------------------------------------------------------->
        </div>
        <div class="card-block card__border__top d-flex justify-content-between">
          <p class="card-text card__location text-truncate"><i class="fa fa-map-marker pr-2"></i><small class="text-muted">Washington DC, United States of America</small></p>
          <small class="text-muted time__shorten">24hr</small>
        </div>
      </div>
<div>

Answer 1

链接中不能有链接，因此 HTML 无法正确解析

https://jsfiddle.net/stevenkaspar/goywan6z/

    <div class="container-fluid card__layout">

  <a class="card mb-4 project__card">
    <img class="card-img-top" src="img/one.jpg" alt="">
    <div class="card-block">
      <h6 class="card-title text-center text-truncate card__header card__header__green">Front-End Programmer</h6>
      <p class="card-text text-center card__content__ellipsis">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <div class="card__project__bookmark__styling">
        <i class="fa fa-bookmark-o pr-2"></i>Bookmark
      </div>
      <!--- if bookmarked - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          <div class="card__project__bookmark__styling card__bookmarked">
            <a href="#" class="card__project__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmarked</a>
          </div>
          --------------------------------------------------------------------------->
    </div>
    <div class="card-block card__border__top d-flex justify-content-between">
      <p class="card-text card__location text-truncate"><i class="fa fa-map-marker pr-2"></i><small class="text-muted">Washington DC, United States of America</small></p>
      <small class="text-muted time__shorten">24hr</small>
    </div>
  </a>
</div>

编辑1:看起来你也关闭了<div>缺少 / - 应该是</div>

编辑 2:Bootstrap 4-beta 已推出，您可以开始使用