Question

我制作了一张自举卡，并在创建之后。我需要卡片链接到另一页面，也不影响卡片内的书签按钮。我希望整张卡片成为另一个页面的链接，应用＆＃34; a＆＃34;标签，它毁了卡的整体造型。并尝试我尝试了另一种方法，但没有有效地工作，因为它也影响卡中的书签按钮。拜托，我试图在没有jquery的情况下完成这项工作，因为它对反应起作用并不好，但纯粹的javascript也没问题。

＆＃13;

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

＆＃13;

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可用，因此您可以开始使用

使引导链接正常工作

1 个答案: