时间戳

首页 > 解决方案 > 分屏设计上的按钮放置

html - 分屏设计上的按钮放置

问题描述

我在玩引导程序，但遇到了一些我正在努力寻找答案的东西。

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

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 之外，我可以使按钮向右下方，但它会添加一个破坏效果的行。

任何帮助，将不胜感激。

标签： htmlcssbootstrap-4

解决方案

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>

推荐阅读