តំណភ្ជាប់ដែលលាតសន្ធឹង

ធ្វើឱ្យធាតុ HTML ណាមួយឬសមាសធាតុ Bootstrap អាចចុចបានដោយ "លាតសន្ធឹង" តំណភ្ជាប់តាមរយៈ CSS ។

បន្ថែម .stretched-linkទៅតំណដើម្បីធ្វើឱ្យ ប្លុកដែលមាន របស់វា អាចចុចបានតាមរយៈ ::afterធាតុ pseudo ។ ក្នុងករណីភាគច្រើន នេះមានន័យថាធាតុ position: relative;ដែលមានតំណភ្ជាប់ជាមួយ .stretched-linkថ្នាក់គឺអាចចុចបាន។ សូមកត់សម្គាល់ ពីរបៀប ដែល CSS positionដំណើរការ.stretched-link មិនអាចលាយជាមួយធាតុតារាងភាគច្រើនបានទេ។

កាតមាន position: relativeតាមលំនាំដើមនៅក្នុង Bootstrap ដូច្នេះក្នុងករណីនេះអ្នកអាចបន្ថែម .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នៅទីនេះ ដើម្បីការពារតំណភ្ជាប់ពីការលាតសន្ធឹងនៅខាងក្រៅធាតុមេ។

សមាសភាគផ្ទាល់ខ្លួនជាមួយនឹងតំណភ្ជាប់លាតសន្ធឹង

នេះគឺជាខ្លឹមសារកន្លែងដាក់មួយចំនួនសម្រាប់សមាសភាគផ្ទាល់ខ្លួន។ វាមានគោលបំណងធ្វើត្រាប់តាមអ្វីដែលខ្លឹមសារនៃពិភពពិតនឹងមើលទៅ ហើយយើងកំពុងប្រើវានៅទីនេះ ដើម្បីផ្តល់ឱ្យសមាសធាតុនៃតួ និងទំហំបន្តិច។

ទៅកន្លែងណាមួយ។

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

ជួរឈរដែលមានតំណលាតសន្ធឹង

ឧទាហរណ៍មួយផ្សេងទៀតនៃមាតិកាកន្លែងដាក់សម្រាប់សមាសភាគផ្ទាល់ខ្លួនផ្សេងទៀត។ វាមានគោលបំណងធ្វើត្រាប់តាមអ្វីដែលខ្លឹមសារនៃពិភពពិតនឹងមើលទៅ ហើយយើងកំពុងប្រើវានៅទីនេះ ដើម្បីផ្តល់ឱ្យសមាសធាតុនៃតួ និងទំហំបន្តិច។

ទៅកន្លែងណាមួយ។

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

កំណត់អត្តសញ្ញាណប្លុកដែលមាន

ប្រសិនបើតំណភ្ជាប់ដែលលាតសន្ធឹងហាក់ដូចជាមិនដំណើរការទេនោះ ប្លុកដែលមានផ្ទុក ប្រហែលជាមូលហេតុ។ លក្ខណៈសម្បត្តិ CSS ខាងក្រោមនឹងបង្កើតធាតុមួយជាប្លុកដែលមាន៖

តម្លៃ positionក្រៅពីstatic
A transformឬ perspectiveតម្លៃផ្សេងក្រៅពីnone
តម្លៃ will-changeនៃ transformឬperspective
តម្លៃ filterផ្សេងពី តម្លៃមួយ none( អាចប្រើបានតែនៅលើ Firefox)will-changefilter

កាតដែលមានតំណភ្ជាប់លាតសន្ធឹង

តំណដែលលាតសន្ធឹងនឹងមិនដំណើរការនៅទីនេះទេ ព្រោះ 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>

តំណភ្ជាប់ដែលលាតសន្ធឹង

កាតដែលមានតំណភ្ជាប់លាតសន្ធឹង

សមាសភាគផ្ទាល់ខ្លួនជាមួយនឹងតំណភ្ជាប់លាតសន្ធឹង

ជួរ​ឈរ​ដែល​មាន​តំណ​លាតសន្ធឹង

កំណត់អត្តសញ្ញាណប្លុកដែលមាន

កាតដែលមានតំណភ្ជាប់លាតសន្ធឹង

ជួរឈរដែលមានតំណលាតសន្ធឹង