.stretched-link broken with parent CSS transform: translate

user_12843280 0
Viewed 50

With Boostrap 5, if a .stretched-link is on an element which have a CSS transform translate, the stretched-link doesn't work.

How can I deal with that ?

.btn {
  transform: translate(0,0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-4">
  <div class="p-4 bg-warning position-relative">
    <a href="https://getbootstrap.com/docs/5.1/helpers/stretched-link/" class="btn btn-primary stretched-link">Button</a>
  </div>
</div>

bootstrap-5 twitter-bootstrap
1 Answers

The translation changes the position properties of the button, which then contains the pseudo-element which .stretched-link applies to the button. It's as though position: relative had been given to the button, which makes it the containing element of the pseudo-element instead of the div.

You can overcome this by wrapping the button in an element and applying translation to it instead.

.translated {
  transform: translate(0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="p-4">
  <div class="p-4 bg-warning position-relative">
    <span class="translated"><a href="https://getbootstrap.com/docs/5.1/helpers/stretched-link/" class="btn btn-primary stretched-link">Button</a></span>
  </div>
</div>

user_12648040
Related