html - 使用 Vue.js 的按钮位置

Question

自从我编码以来已经有一段时间了，但我想知道如何将我的登录按钮定位在屏幕的底部中心并在其上显示图像？谢谢

代码：

<template>

    <div class="container-fluid">
      <img alt="Sportly logo" src="~@/assets/sportly.png">
        <div class="row">
            <div class="col-md-6">
                <h3>Login</h3>
                <button class="btn btn-primary"
                    @click="signIn">
                    <i class="fa fa-twitter"></i>
                    Sign In with Twitter
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        signIn () {
            this.$store.dispatch('signIn')
        }
    }
}
</script>

<style scoped>
h3 {
    font-weight: 700;
}
button {
    background-color: #1dcaff;
    border: 1px solid  #1dcaff;
    positioning: absolute;
bottom: 0px;

}
div button:hover {
    background-color: #00aced;
    border: 1px solid  #00aced;
}
</style>

标签： htmlcssvue.jsbutton

Answer 1

你的问题是 class col-md-6。在您的情况下，它具有样式：{width: 50%}。你需要另一个适合你情况的课程