gerilmiş bağlantı

CSS aracılığıyla iç içe bir bağlantıyı "gererek" herhangi bir HTML öğesini veya Bootstrap bileşenini tıklanabilir hale getirin.

Bir sözde öğe aracılığıyla içerdiği bloğu tıklanabilir .stretched-linkhale getirmek için bir bağlantıya ekleyin . Çoğu durumda bu , sınıfla bağlantı içeren bir öğenin tıklanabilir olduğu anlamına gelir.::afterposition: relative;.stretched-link

Kartlar position: relativeBootstrap'ta varsayılan olarak bulunur, bu durumda .stretched-linksınıfı başka HTML değişiklikleri yapmadan karttaki bir bağlantıya güvenle ekleyebilirsiniz.

Uzatılmış bağlantılarda birden fazla bağlantı ve hafifçe vurma hedefi önerilmez. Bununla birlikte, bazı positionve z-indexstiller bunun gerekli olması durumunda yardımcı olabilir.

Uzatılmış bağlantı ile kart

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

Bir yere git

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Medya nesneleri varsayılan olarak sahip değildir , bu nedenle bağlantının medya nesnesinin dışına uzanmasını önlemek için buraya position: relativeeklememiz gerekir ..position-relative

Uzatılmış bağlantıya sahip medya

Cras, amet nibh libero, gravida nulla'da oturuyor. Sıfır vel metus scelerisque ante sollicitudin. Cras purus odio, vulputatta vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus'ta Donec lacinia congue felis.

Bir yere git

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Sütunlar position: relativevarsayılan olarak vardır, bu nedenle tıklanabilir sütunlar yalnızca .stretched-linksınıfın bir bağlantı üzerinde olmasını gerektirir. Bununla birlikte, bir bağlantıyı bir bütünün üzerine germek , sütunda ve satırda .rowgerektirir ..position-static.position-relative

Uzatılmış bağlantılı sütunlar

Bir yere git

<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

İçeren bloğu tanımlama

Uzatılan bağlantı çalışmıyor gibi görünüyorsa, bunun nedeni muhtemelen içeren blok olacaktır. Aşağıdaki CSS özellikleri, bir öğeyi içeren blok yapacaktır:

positionBunun dışında bir değerstatic
A transformveya perspectivebunun dışındaki değernone
Bir will-changedeğer transformveyaperspective
filterdışında bir değer noneveya will-changedeğeri filter(yalnızca Firefox'ta çalışır)

Uzatılmış bağlantılara sahip kart

Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.

position: relativeUzatılmış link, linke eklendiği için burada çalışmayacaktır .

Bu uzatılmış bağlantı , yalnızca - etiketine yayılacaktır p, çünkü ona bir dönüşüm uygulanır.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>