Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Girêdana dirêjkirî

Her hêmanek HTML-ê an pêkhatek Bootstrap-ê ku bi "rêvekirina" girêdanek hêlînkirî bi CSS-ê ve were klîk kirin, bikin.

Zencîreyek zêde .stretched-linkbikin da ku bloka wê ya tê de bi riya ::afterhêmanek pseudo ve were klîk kirin. Di pir rewşan de, ev tê vê wateyê ku hêmanek pê re position: relative;girêdanek bi .stretched-linkpolê re tê klîk kirin. Ji kerema xwe bala xwe bidin ku CSS çawa positiondixebite , .stretched-linknikare bi piraniya hêmanên tabloyê re were tevlihev kirin.

Kartên ji position: relativehêla xwerû ve di Bootstrap-ê de hene, ji ber vê yekê hûn dikarin bi ewlehî .stretched-linkpolê li ser girêdanek di qertê de bêyî ku guhartinên din ên HTML-ê lê zêde bikin.

Gelek girêdan û armancên tap bi girêdanên dirêjkirî nayê pêşniyar kirin. Lêbelê, hin positionû z-indexşêwaz dikarin bibin alîkar ku ev hewce be.

Card image cap
Karta bi girêdana dirêjkirî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Biçe cihekî
<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>

Piraniya hêmanên xwerû ji position: relativehêla xwerû ve tune ne, ji ber vê yekê em hewce ne ku li vir lê zêde bikin .position-relativeda ku rê li ber dirêjkirina girêdanê li derveyî hêmana dêûbav bigire.

Generic placeholder image
Parçeyek xwerû ya bi girêdana dirêjkirî

Ev ji bo pêkhateya xwerû hin naverok cîhgir e. Mebest ew e ku meriv çawa hin naveroka cîhana rastîn bişopîne, û em wê li vir bikar tînin da ku beşê hinekî laş û mezinahî bidin.

Biçe cihekî
<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
Stûnên bi girêdana dirêjkirî

Nimûneyek din a naveroka cîhê ji bo vê hêmana xwerû ya din. Mebest ew e ku meriv çawa hin naveroka cîhana rastîn bişopîne, û em wê li vir bikar tînin da ku beşê hinekî laş û mezinahî bidin.

Biçe cihekî
<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>

Naskirina bloka têde

Ger girêdana dirêjkirî nexebite, dibe ku bloka tê de bibe sedem. Taybetmendiyên CSS-ê yên jêrîn dê hêmanek bloka têde bikin:

  • Nirxek positionji bilîstatic
  • A transforman perspectivenirxa din ji bilînone
  • Nirxa an will-change_transformperspective
  • Nirxek filterji bilî nonean will-changenirxek filter(tenê li ser Firefox-ê dixebite)
Card image cap
Karta bi girêdanên dirêjkirî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Zencîreya dirêjkirî dê li vir nexebite, ji ber ku position: relativeli zencîreyê hatî zêdekirin

Ev girêdana dirêjkirî dê tenê li ser p-tagê belav bibe, ji ber ku veguherînek jê re tê sepandin.

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