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. Tafadhali kumbuka kutokana na jinsi CSS positioninavyofanya kazi , .stretched-linkhaiwezi kuchanganywa na vipengele vingi vya jedwali.

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 vingi maalum havina position: relativekwa chaguo-msingi, kwa hivyo tunahitaji kuongeza .position-relativehapa ili kuzuia kiungo kunyoosha nje ya kipengele kikuu.

Kipengele maalum kilicho na kiungo kilichonyooshwa

Haya ni baadhi ya maudhui ya kishika nafasi kwa kipengele maalum. Inakusudiwa kuiga jinsi baadhi ya maudhui ya ulimwengu halisi yanavyoweza kuonekana, na tunayatumia hapa ili kukipa kijenzi hicho ukubwa na ukubwa.

Nenda mahali fulani

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

Safu zilizo na kiungo kilichonyoshwa

Mfano mwingine wa maudhui ya kishika nafasi kwa kipengele hiki kingine maalum. Inakusudiwa kuiga jinsi baadhi ya maudhui ya ulimwengu halisi yanavyoweza kuonekana, na tunayatumia hapa ili kukipa kijenzi hicho ukubwa na ukubwa.

Nenda mahali fulani

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

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>