【问题标题】: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 中移动它。我通过调整它的 ma​​rgin-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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-28
    • 1970-01-01
    • 2020-06-12
    • 1970-01-01
    相关资源
    最近更新 更多