我使用的是bootstrap 5.0.2
按钮的动画应该将按钮的大小从中心对称地调整到100%的可用宽度。它没有像想象的那样工作,因为它超出了对称线(右边的尺寸太宽)
我不明白为什么,因为:
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--code-->
<div class="container bg-success">
<div class="border border-dark">
<div class="row m-2 w-animate">
<a target="_blank" href="velo-art" class="btn bg-animate border border-dark rounded-pill fs-1 col-12 text-center p-2">
test
</a>
</div>
<div class="row m-2 w-animate">
<a target="_blank" href="velo-art" class="btn bg-animate border border-dark rounded-pill fs-1 col-12 text-center p-2">
test_2
</a>
</div>
<div class="row m-2 w-animate">
<a target="_blank" href="velo-art" class="btn bg-animate border border-dark rounded-pill fs-1 col-12 text-center p-2">
test_3
</a>
</div>
</div>
</div>
<style>
.w-animate {
position: relative;
width: 50%;
left: 25%;
animation: center-animate 3s ease infinite alternate;
}
.w-animate:hover {
animation-play-state: paused;
}
@keyframes center-animate {
0% {
width: 50%;
left: 25%;
}
100% {
width: 100%;
left: 0%;
}
}
</style>
1条答案
按热度按时间bnlyeluc1#
每个
<a>
nchor的父<div>
具有m-2
类,即margin: 0.5rem
(参见图I)。图一
因此,存在左右边距,偏移了
<div>
的实际位置,因此出现了不对称行为。将每个m-2
类更改为mx-0
,以删除左右边距,并添加my-2
,以保留每个<div>
之间的0.5rem
(请参见下面的示例)。下列范例具有:
m-2
分配给第一个<div>
mx-1
和my-2
分配给第二个<div>
mx-0
和my-2
分配给第三个<div>
请注意每个中心位置的偏移量差异。第三个
<div>
是要使用的正确类。另请注意,第二个和第三个<div>
的my-2
为margin: 0.5rem 0
(上下边距为0.5rem
)。仅供参考,该示例还显示了完整的引导程序文档应如何排列。