پیوند کشیده

هر عنصر 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، در 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 در faucibus.

برو یه جایی

<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_transformperspective
filterمقداری غیر از یا مقدار none( فقط در فایرفاکس کار می کند)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>