Source

Kiungo kilichonyoshwa

Fanya kipengele chochote cha HTML au kijenzi cha Bootstrap kibonyezwe kwa "kunyoosha" kiungo kilichowekwa kiota kupitia CSS.

Ongeza .stretched-linkkwenye kiungo ili kufanya kizuizi kilicho na kibonyeze kupitia ::afterkipengele bandia. Katika hali nyingi, hii ina maana kwamba kipengele position: relative;kilicho na kiungo na .stretched-linkdarasa kinaweza kubofya.

Kadi zina position: relativekwa chaguo-msingi katika Bootstrap, kwa hivyo katika kesi hii unaweza kuongeza .stretched-linkdarasa kwa kiunga kwenye kadi bila mabadiliko yoyote ya HTML kwa usalama.

Viungo vingi na shabaha za kugonga hazipendekezwi kwa viungo vilivyopanuliwa. Walakini, baadhi positionna z-indexmitindo inaweza kusaidia ikiwa hii itahitajika.

Kadi iliyo na kiungo kilichonyooshwa

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Nenda mahali fulani

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

Vipengee vya media havina position: relativekwa chaguo-msingi, kwa hivyo tunahitaji kuongeza .position-relativehapa ili kuzuia kiungo kunyoosha nje ya kifaa cha media.

Vyombo vya habari vilivyo na kiungo kilichonyooshwa

Cras sit amet nibh libero, katika gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum katika vulputate saa, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis kwenye faucibus.

Nenda mahali fulani

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

Safu wima ni position: relativechaguomsingi, kwa hivyo safu wima zinazoweza kubofya zinahitaji tu .stretched-linkdarasa kwenye kiungo. Walakini, kunyoosha kiunga juu ya nzima .rowkunahitaji .position-statickwenye safu na .position-relativekwenye safu.

Safu zilizo na kiungo kilichonyoshwa

Nenda mahali fulani

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

Kutambua kizuizi kilicho na

Ikiwa kiunga kilichopanuliwa hakionekani kufanya kazi, kizuizi kilicho na labda ndicho chanzo. Sifa zifuatazo za CSS zitafanya kipengee kuwa kizuizi kilicho na:

Thamani positionnyingine isipokuwastatic
A transformau perspectivethamani nyingine isipokuwanone
Thamani will-changeya transformauperspective
Thamani filternyingine isipokuwa noneau will-changethamani ya filter(inafanya kazi tu kwenye Firefox)

Kadi iliyo na viungo vilivyonyooshwa

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kiungo kilichonyooshwa hakitafanya kazi hapa, kwa sababu position: relativekimeongezwa kwenye kiungo

Kiungo hiki kilichonyoshwa kitaenezwa juu ya p-tag tu, kwa sababu kigeuzi kinatumika kwake.

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