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

vq8itlhq 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(158)

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/74693365/centrally-aligned-css-animation-is-not-symmetrical-despite-setting-width100-le

1条答案

按热度按时间

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-1和my-2分配给第二个<div>
类mx-0和my-2分配给第三个<div>

请注意每个中心位置的偏移量差异。第三个<div>是要使用的正确类。另请注意，第二个和第三个<div>的my-2为margin: 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>

赞(0）回复(0）举报 2022-12-07

我来回答

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

1条答案

相关问题

热门标签

最新问答