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

ធ្វើឱ្យធាតុ 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="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>This is some placeholder content for the media object. 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>

ជួរឈរគឺ 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>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>

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

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

ប្រព័ន្ធផ្សព្វផ្សាយដែលមានតំណភ្ជាប់លាតសន្ធឹង

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

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

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

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