Question

如何将bootstrap 4卡作为按钮。这意味着我点击了卡中的任何部分，它会调用一些动作。

此代码来自bootstrap 4

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">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>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Answer 1

我一直在研究这个问题，但仅限于链接，而不是任何javascript操作。希望它可以帮到某人。

我的解决方案是在卡内放一个按钮。以下是我的试用内容： https://www.bootply.com/o8iMXqiBRt

我把最后一张卡留作原始代码。它在firefox，chrome和edge中看起来不错。

需要一个小的CSS来保持相同的格式：

.btn-fix {
padding: 0;
border: none;
white-space: normal;
 }

html非常相似，但是文本需要像“text-dark”和“text-left”这样的引导类来复制卡格式。

     <div class="card">
           <a href="#" class="btn btn-fix text-left">
              <img class="card-img-top " src="..." alt="Card image cap">
                <div class="card-block ">
                    <h4 class="card-title text-dark ">Card title</h4>
                    <p class="card-text text-dark ">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text "><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </a>
        </div>

或者你可以在btn-fix css中添加几个类：

.btn-fix {
padding: 0;
border: none;
white-space: normal;
color: black;
text-align: left;
}

没有Bootstrap 4标签的html，它适用于较长的btn-fix css

   <div class="card">
            <a href="#" class="btn btn-fix ">
              <img class="card-img-top " data-src="http://www.imag-e-nation.com/templates/ArtFraming/images/freeprintables/thumbnail/favourbox1_small.jpg" alt="Card image cap">
                <div class="card-block ">
                    <h4 class="card-title  ">Card title</h4>
                        <p class="card-text ">This is a longer card with 
      supporting text below as a natural lead-in to additional content. This       
   content is a little bit longer.</p>
                    <p class="card-text "><small class="text-muted">Last 
       updated 3 mins ago</small></p>
                </div>
            </a>
        </div>

Answer 2

使用jquery点击div.card-deck-wrapper添加一个函数就可以了：

$('.card-deck-wrapper').on('click', function(event) {
     alert('You clicked the Bootstrap Card');
});

供参考：Jquery Click Event

Answer 3

只要＆lt; a＆gt;是显示：块| flex应该没问题。它还可以用于键盘导航和辅助功能。

<div class="card-deck-wrapper">
  <div class="card-deck">
    <a href="google.com" class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </a>
    <a class="card" href="google.com">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </a>
    <a class="card" href="google.com">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">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>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </a>
  </div>
</div>

Answer 4

Bootstrap 4.3.x 现在为此提供了stretched-link类。

<div class="card p-2">
    <a class="card-block stretched-link text-decoration-none" href>
        <h4 class="card-title">Card title</h4>
        ...
    </a>
</div>

演示：https://www.codeply.com/go/VfxYt2AVDL

Bootstrap 4卡组件作为按钮

4 个答案: