html - 在 Bootstrap col 中定位绝对项

Question

我正在尝试将绝对定位的 block 动画化到 Bootstrap 列中。

问题是 bootstrap col 没有固定宽度，所以在不同的屏幕上，我所有的绝对元素都会有不同的

What would be amazing is that if I set an element to for example: translateX(50%). It will always be in the center of my col-xs-4

有没有人有这方面的经验？

我试过了

使用 transform:translate 百分比或像素。

@keyframes animation {
    0% {transform: translateX(-100%) }
    100% {transform: translateX(0) }
}

这不起作用，因为百分比不是基于 Bootstrap 列的宽度。所以它不是响应式的，并且对于每个屏幕尺寸，最终都会出现在不同的地方。

Answer 1

左:50%； transform: translateX(-50%;) 将在 .col-xs-4

中水平居中