Bootstrap 尽管设置了宽度:100%左:0,但中心对齐的CSS动画不对称

vq8itlhq  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(149)

我使用的是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>
bnlyeluc

bnlyeluc1#

每个<a> nchor的父<div>具有m-2类,即margin: 0.5rem(参见图I)。

图一

<!-- ⬍ 0.5rem -->
<!-- ⬌ 0.5rem --> <div class="row m-2 w-animate"></div> <!-- ⬌ 0.5rem -->
                            <!-- ⬍ 0.5rem -->

因此,存在左右边距,偏移了<div>的实际位置,因此出现了不对称行为。将每个m-2类更改为mx-0,以删除左右边距,并添加my-2,以保留每个<div>之间的0.5rem(请参见下面的示例)。
下列范例具有:

  • m-2分配给第一个<div>
  • mx-1my-2分配给第二个<div>
  • mx-0my-2分配给第三个<div>

请注意每个中心位置的偏移量差异。第三个<div>是要使用的正确类。另请注意,第二个和第三个<div>my-2margin: 0.5rem 0(上下边距为0.5rem)。仅供参考,该示例还显示了完整的引导程序文档应如何排列。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .w-animate {
      position: relative;
      width: 50%;
      animation: center-animate 1s ease infinite alternate;
    }
    
    .w-animate:hover {
      animation-play-state: paused;
    }
    
    @keyframes center-animate {
      0% {
        width: 50%;
        left: 25%;
      }
      100% {
        width: 100%;
        left: 0%;
      }
    }
  </style>
  </head>
  <body>
  <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">
         m-2
      </a>
      </div>
      <div class="row mx-1 my-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">
          mx-1 my-2
      </a>
      </div>
      <div class="row mx-0 my-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">
          mx-0 my-2
      </a>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>

</html>

相关问题