分屏设计上的按钮位置

问题描述

我正在使用引导程序，我遇到了我在努力寻找答案的东西。

我想在屏幕右下角靠近折叠处放置一个“登录”。下面是我的代码：

img{

    position: absolute;
    bottom: 40%;
    left: 50%;
    transform:translateX(-40%);
    z-index: 2;
}


.leftside,.rightside {

    height: 50vh;
    width: 100%;

}

@media screen and (min-width:768px)

{
    .leftside,.rightside {
        height: 100vh;
    }
}
.leftside {

    background:#20639B;

}

.rightside {

}
.home-btn {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform:translateX(-50%);
    z-index: 2;
    font-size: 1.6em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="homepage.css">
</head>
<body>
    <img src="Bird.png" alt="hummingbird">
    <div class="row no-gutters">
        <div class="col-md-6 no-gutters">
            <div class="leftside">

            </div>



        </div>
        <div class="col-md-6 no-gutters">
            <div class="rightside d-flex justify-content-center align-items-center">
                <h2>Mini Blog Project</h2>
                <button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
            </div>
            

        </div>


    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

当前按钮位于右侧框的中央，这是我的第二个选择。我的第一个方法是将它放在右下角附近的右面板中。如果将按钮移到右侧div的外侧，则可以使按钮向下移至右侧，但是会添加一行破坏效果的行。

任何帮助将不胜感激。

解决方法

img{

    position: absolute;
    bottom: 40%;
    left: 50%;
    transform:translateX(-40%);
    z-index: 2;
}


.leftside,.rightside {

    height: 50vh;
    width: 100%;

}

@media screen and (min-width:768px)

{
    .leftside,.rightside {
        height: 100vh;
    }
}
.leftside {

    background:#20639B;

}

.rightside {
 position: relative;
}
.home-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    font-size: 1.6em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="homepage.css">
</head>
<body>
    <img src="Bird.png" alt="hummingbird">
    <div class="row no-gutters">
        <div class="col-md-6 no-gutters">
            <div class="leftside">

            </div>



        </div>
        <div class="col-md-6 no-gutters">
            <div class="rightside d-flex justify-content-center align-items-center">
                <h2>Mini Blog Project</h2>
                <button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
            </div>
            

        </div>


    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

bootstrap-4 html

分屏设计上的按钮位置

问题描述

解决方法

相关问答