سوزۇلغان ئۇلىنىش

ھەر قانداق HTML ئېلېمېنتى ياكى Bootstrap زاپچاسلىرىنى CSS ئارقىلىق ئۇلانغان ئۇلىنىشنى «سوزۇش» ئارقىلىق چېكىشكە بولىدۇ.

.stretched-linkئۇلانمىنى قوشۇپ ، ئۇنىڭ تەركىبىدىكى بۆلەكنى::after يالغان ئېلېمېنت ئارقىلىق چېكىشكە بولىدۇ. كۆپىنچە ئەھۋاللاردا ، بۇ سىنىپ position: relative;بىلەن ئۇلىنىشنى ئۆز ئىچىگە ئالغان ئېلېمېنتنىڭ .stretched-linkچېكىشكە بولىدىغانلىقىدىن دېرەك بېرىدۇ.

Bootstrap دا كارتىلارنىڭ position: relativeسۈكۈتتىكى ھالىتى بار ، شۇڭا بۇ ئەھۋالدا سىز .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 ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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قىممىتى transformياكى _perspective
ئۇنىڭدىن filterباشقا قىممەت noneياكى will-changeقىممەت filter(پەقەت Firefox دا ئىشلەيدۇ)

ئۇلانغان كارتا

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

ئۇلانغان ئۇلىنىش بۇ يەردە ئىشلىمەيدۇ ، چۈنكى position: relativeئۇلىنىشقا قوشۇلدى

بۇ سوزۇلغان ئۇلىنىش پەقەت p-tag غا تارقىتىلىدۇ ، چۈنكى ئۇنىڭغا ئۆزگەرتىش قوللىنىلىدۇ.

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