Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Na ọna asopọ

Ṣe eyikeyi eroja HTML tabi paati Bootstrap ti tẹ nipasẹ “na” ọna asopọ itẹ-ẹiyẹ nipasẹ CSS.

Ṣafikun .stretched-linksi ọna asopọ kan lati jẹ ki bulọọki ti o ni ninu rẹ tẹ nipasẹ ohun ::afterafarape kan. Ni ọpọlọpọ igba, eyi tumọ si pe ohun kan pẹlu position: relative;ti o ni ọna asopọ kan pẹlu .stretched-linkkilasi jẹ titẹ. Jọwọ ṣe akiyesi fun bi CSS ṣe positionn ṣiṣẹ , .stretched-linkko le dapọ pẹlu awọn eroja tabili pupọ julọ.

Awọn kaadi ni position: relativenipasẹ aiyipada ni Bootstrap, nitorinaa ninu ọran yii o le ṣafikun .stretched-linkkilasi lailewu si ọna asopọ kan ninu kaadi laisi awọn ayipada HTML miiran.

Awọn ọna asopọ pupọ ati awọn ibi-afẹde tẹ ni kia kia ko ṣe iṣeduro pẹlu awọn ọna asopọ ti o na. Sibẹsibẹ, diẹ ninu positionati z-indexawọn aza le ṣe iranlọwọ ti eyi ba nilo.

Card image cap
Kaadi pẹlu nà asopọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Lọ ibikan
html
<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>

Pupọ julọ awọn paati aṣa ko ni position: relativenipasẹ aiyipada, nitorinaa a nilo lati ṣafikun .position-relativeibi lati ṣe idiwọ ọna asopọ lati na ni ita eroja obi.

Generic placeholder image
Aṣa paati pẹlu nà asopọ

Eyi jẹ diẹ ninu awọn akoonu ibi ipamọ fun paati aṣa. O ti pinnu lati farawe ohun ti diẹ ninu akoonu-aye gidi yoo dabi, ati pe a nlo o nibi lati fun paati ni ara ati iwọn diẹ.

Lọ ibikan
html
<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the 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>
Generic placeholder image
Awọn ọwọn pẹlu nà ọna asopọ

Apeere miiran ti akoonu ibi ipamọ fun paati aṣa miiran. O ti pinnu lati farawe ohun ti diẹ ninu akoonu-aye gidi yoo dabi, ati pe a nlo o nibi lati fun paati ni ara ati iwọn diẹ.

Lọ ibikan
html
<div class="row g-0 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 p-4 ps-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>

Idamo Àkọsílẹ ti o ni

Ti ọna asopọ ti o nà ko dabi pe o ṣiṣẹ, bulọọki ti o ni ninu yoo jasi idi. Awọn ohun-ini CSS wọnyi yoo jẹ ki eroja kan di bulọọki ti o ni ninu:

  • A positioniye miiran justatic
  • A transformtabi perspectiveiye miiran junone
  • A will-changeiye ti transformtabiperspective
  • Iye filtermiiran ju nonetabi will-changeiye kan ti filter(ṣiṣẹ nikan lori Firefox)
Card image cap
Kaadi pẹlu nà ìjápọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Na ọna asopọ yoo ko sise nibi, nitori position: relativeti wa ni afikun si awọn ọna asopọ

Ọna asopọ ti o nà yii yoo tan lori p-tag nikan, nitori pe a ti lo iyipada si rẹ.

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