延伸链接

延伸链接-Bootstrap 5和Material Design 2.0

通过CSS“拉伸”嵌套链接,使任何HTML元素或MDB组件都可单击。


基本例子

.stretched-link 添加到链接以使其 包含块 可通过 :: after 伪元素单击。在大多数情况下,这意味着 带有 position:relative; 的链接,其中包含与 .stretched-link 类是可单击的。

卡在Bootstrap中默认具有 position:relative ,因此在这种情况下,您可以 安全地将 .stretched-link 类添加到卡中的链接,而无需任何其他HTML 变化。

延伸链接不建议使用多个链接和点击目标。但是,有些 如果需要, position z-index 样式可以提供帮助。

...
Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

          <div class="card">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/041.webp"
              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 ,以防止链接延伸到 父元素。

...
Custom component with stretched link

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.

Go somewhere

          <div class="d-flex position-relative">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/041.webp"
              class="flex-shrink-0 me-3"
              style="max-width: 12rem"
              alt="..."
            />
            <div>
              <h5 class="mt-0">Custom component 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>
        
...
Columns with stretched link

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.

Go somewhere

          <div class="row g-0 bg-light position-relative">
            <div class="col-md-6 mb-md-0 p-md-4">
              <img
                src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                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>
                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属性将使元素包含 块:

  • static 之外的 position
  • none 之外的 transform perspective
  • transform perspective will-change
  • none 之外的 filter 值或 will-change 值 (过滤器)(仅适用于Firefox)
...
Card with stretched links

Some quick example text to build on the card title and make up the bulk of the card's content.

Stretched link will not work here, because position: relative is added to the link

This stretched link will only be spread over the p-tag, because a transform is applied to it.


          <div class="card" style="width: 18rem">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/041.webp"
              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