ブートストラップリンクを正しく作っています

Question

ブートストラップカードを作りました。別のページにリンクするにはカードが必要で、カード内のブックマークボタンには影響しません。私はカード全体を別のページへのリンクにしたい、 "a"タグを適用すると、それはカードの全体的なスタイリングを台無しにした。私は別の方法を試しましたが、効果的に動作しませんでした。これはカードのブックマークボタンにも影響しました。私はjqueryを使わないでこの作業をしようとしています。反応がうまくいかないので、純粋なjavascriptは問題ありません。 HTMLが正しく

https://jsfiddle.net/stevenkaspar/goywan6z/を解析されないように

<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

あなたは、リンク内のリンクを持つことはできません

<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：あなたは