web-dev-qa-db-ja.com

Bootstrap 4つのカードコンポーネントをボタンとして

どのように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>
twitter-bootstraptwitter-bootstrap-3bootstrap-4
7
phongyewtong

私もこれに取り組んできましたが、JavaScriptのアクションではなく、リンクのためだけです。それが誰かを助けることを願っています。

私の解決策は、カードの中にボタンを置くことです。これがあなたが試してみるための私のブートリーです：
https://www.bootply.com/o8iMXqiBRt

最後のカードを元のコードとして残しました。 Firefox、Chrome、Edgeでは問題ないように見えます。

同じフォーマットを維持するには、小さなcssが必要です。

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

HTMLは非常に似ていますが、カードのフォーマットをコピーするには、テキストにbootstrap "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-fixcssにさらにいくつかのクラスを追加できます。

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

長いbtnで動作するBootstrap 4タグなしのhtml-修正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>
3
grahamlander

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

0
Codeply-er