ลิงค์ยืด

ทำให้องค์ประกอบ HTML หรือองค์ประกอบ Bootstrap สามารถคลิกได้โดย "การยืด" ลิงก์ที่ซ้อนกันผ่าน CSS

เพิ่ม.stretched-linkในลิงก์เพื่อให้บล็อกที่มีสามารถคลิกได้โดยใช้::afterองค์ประกอบหลอก ในกรณีส่วนใหญ่ นี่หมายความว่าองค์ประกอบposition: relative;ที่มีลิงก์กับ.stretched-linkคลาสนั้นสามารถคลิกได้

การ์ดมีposition: relativeโดยค่าเริ่มต้นใน Bootstrap ดังนั้นในกรณีนี้คุณสามารถเพิ่ม.stretched-linkคลาสไปยังลิงก์ในการ์ดได้อย่างปลอดภัยโดยไม่มีการเปลี่ยนแปลง HTML อื่นๆ

ไม่แนะนำให้ใช้หลายลิงก์และเป้าหมายการแตะกับลิงก์ที่ยืดออก อย่างไรก็ตาม บางpositionและz-indexรูปแบบสามารถช่วยได้หากต้องการ

การ์ดพร้อมลิงค์ยืด

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

ไปที่ไหนสักแห่ง

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

ออบเจ็ก ต์สื่อไม่มีposition: relativeตามค่าเริ่มต้น ดังนั้นเราจึงจำเป็นต้องเพิ่มที่.position-relativeนี่เพื่อป้องกันไม่ให้ลิงก์ขยายออกนอกออบเจ็กต์สื่อ

สื่อที่มีลิงค์ยืดออก

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

ไปที่ไหนสักแห่ง

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

คอลัมน์เป็นposition: relativeค่าเริ่มต้น ดังนั้นคอลัมน์ที่คลิกได้ต้องการเฉพาะ.stretched-linkคลาสในลิงก์เท่านั้น อย่างไรก็ตาม การยืดลิงก์ให้ยาวขึ้นทั้งคอลัมน์และในแถวนั้น.rowจำเป็นต้องมี.position-static.position-relative

คอลัมน์ที่มีลิงค์ยืด

ไปที่ไหนสักแห่ง

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

ระบุบล็อกที่มี

หากลิงก์ที่ยืดออกดูเหมือนจะใช้งานไม่ได้บล็อกที่มีอาจเป็นสาเหตุ คุณสมบัติ CSS ต่อไปนี้จะทำให้องค์ประกอบเป็นบล็อกที่มี:

ค่าpositionอื่นที่ไม่ใช่static
A transformหรือperspectiveค่าอื่นที่ไม่ใช่none
ค่าwill-changeของtransformหรือperspective
ค่าfilterอื่นที่ไม่ใช่ค่าของnone( ใช้ได้กับ Firefox เท่านั้น)will-changefilter

การ์ดที่มีลิงค์ยืด

ลิงก์แบบขยายจะไม่ทำงานที่นี่ เนื่องจากposition: relativeถูกเพิ่มไปยังลิงก์แล้ว

ลิงก์ที่ยืดออกนี้จะกระจายอยู่เหนือpแท็ก - เนื่องจากมีการนำการแปลงไปใช้

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