پیوند کشیده

هر عنصر HTML یا مؤلفه Bootstrap را با «کشیدن» پیوند تودرتو از طریق CSS قابل کلیک کنید.

به یک پیوند اضافه .stretched-linkکنید تا بلوک حاوی آن از طریق یک ::afterعنصر شبه قابل کلیک باشد. در بیشتر موارد، این بدان معنی است که عنصری position: relative;که حاوی پیوندی با .stretched-linkکلاس است، قابل کلیک است. لطفاً توجه داشته باشید که CSS چگونه positionکار می‌کند ، .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کنیم تا از کشیده شدن پیوند به خارج از شی رسانه جلوگیری کنیم.

رسانه با پیوند کشیده

این مقداری از محتوای نگهدارنده مکان برای شی رسانه است. در نظر گرفته شده است که محتوای واقعی را تقلید کند، و ما از آن در اینجا برای دادن بدنه و اندازه به جزء استفاده می کنیم.

برو یه جایی

<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>This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</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>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</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>