左中间屏幕中的移动按钮答案

【问题标题】：Move button in the left middle screen左中间屏幕中的移动按钮
【发布时间】：2023-04-04 14:38:01
【问题描述】：

我试图在左屏幕中间移动一个按钮，但是当我改变任何东西时，整个东西都会移动。例如，当我向下移动按钮时，我正在使用卡片，卡片也会移动，这是我不想要的。

沙盒链接：click here

我只想在鼠标悬停时显示一个具有扩展效果的按钮，但它应该贴在 UI 的左侧和中间。

当前：

预期：

【问题讨论】：

我对 vue 不是很熟悉，但是如果你把这个等价物放在按钮上，你会得到你想要的效果。 style="position:absolute;top:50%;left:0;transform:translateY(-50%)"

标签： css twitter-bootstrap bootstrap-vue

【解决方案1】：

演示：https://codesandbox.io/s/muddy-cache-nwl0c?file=/App.vue

我为您添加了可扩展按钮并将其放置在您想要的位置，而无需在 html 中移动它。我通过调整它的 margin-bottom 来做到这一点。对于按钮的悬停动画，我使用了 css 属性转换，如果您有兴趣了解更多信息，可以阅读一些 here。我还在按钮中添加了 runAll 的 id。

代码：

<style>
#runAll {
  width: 100px;
  transition: width 0.2s ease-in;
}

#runAll:hover {
  width: 500px;
}
</style>
<template>
  <div>
    <b-button id="runAll" class="runAll" style="margin-bottom: -425px">Run All</b-button>
    <b-card-group deck>
      <b-card border-variant="info" header="Info" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="warning"
        header="Warning"
        header-bg-variant="transparent"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="danger"
        header="Danger"
        header-border-variant="danger"
        header-text-variant="danger"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</template>

<script>
export default {};
</script>

【讨论】：