【发布时间】：2020-07-19 12:14:47
【问题描述】：
我想设计一个页面，其中用于登录的视口的左半部分和用于注册的视口的其他半右部分，即拆分布局（在平板电脑、桌面和大屏幕中并排并堆叠（在移动设备和较低设备中达到移动宽度范围后用于登录的顶部和用于注册的底部）。我用两个 col-md-6（一个用于登录，另一个用于注册）和100vh 用于最小宽度：768px 及以上和50vh 用于最大宽度：768px 设备（意味着它显示为堆叠的移动设备）及以下。我制作了这段代码，但是在大小测试（通过缩放浏览器窗口）之后，我遇到了问题（按比例缩小），例如登录部分（即左半边）高度将大小作为登录表单。我没有给出任何 div 的任何特定宽度和高度（因为引导程序使用网格系统自动处理它）。我正在提供代码，以便您可以帮助我。
我想要这个输出（实际上我得到了它有一个小缺陷）
Sample-in-mobile Sample-in-Computer
问题：
/*index.css*/
body {
padding-top: 56px;
}
.tmbl-nav {
background-color: #001427;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
/*.left-side,.right-side{
height:50vh;
width:100%;
}
*/
.left-side {
background-color: #BF0603;
}
.right-side {
background-color: #8D0801;
}
.form-box {
background-color: white;
padding: 25px 25px 25px 25px;
}
/* Medium devices (landscape tablets, 768px and down) */
@media only screen and (max-width:768px) {
.nav-link {
text-align: center;
}
}
@media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}<!DOCTYPE HTML>
<html lang="en">
<head>
<!--index.php-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<title>My Web Site</title>
</head>
<body>
<?php include_once("inc/header.php");?>
<!--navbar for navigation-->
<div class="container-fluid">
<div class="row no-gutters">
<div class="left-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Login Now</h2>
<p>Enter Username & Password to Log on.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputUName" class="sr-only">Username</label>
<input type="text" class="form-control" id="inputUName" aria-describedby="userName" placeholder="Username" />
</div>
<div class="form-group">
<label for="inputPsword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPsword" aria-describedby="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="right-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Register Now</h2>
<p>Fill in the below form to get instant access.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputFName" class="sr-only">Full Name</label>
<input type="text" class="form-control" id="inputFName" aria-describedby="fullName" placeholder="Full Name" />
</div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="email" placeholder="Email" />
</div>
<div class="form-group">
<label for="inputMobile" class="sr-only">Mobile</label>
<input type="number" class="form-control" id="inputMobile" aria-describedby="mobile" placeholder="Mobile Number" />
</div>
<div class="form-group">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword" aria-describedby="password" placeholder="Password" />
</div>
<div class="form-group">
<label for="inputCPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputCPassword" aria-describedby="confirmPassword" placeholder="Confirm Password" />
</div>
<div class="form-group row text-dark">
<label for="checkYesNo" class="col-auto pt-0 col-form-label">You have Reference ID:</label>
<div class="col-auto">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
<label class="custom-control-label" for="inlineRadio1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
<label class="custom-control-label" for="inlineRadio2">No</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputREmail" class="sr-only">Reference Email ID</label>
<input type="email" class="form-control" id="inputREmail" aria-describedby="referenceEmail" placeholder="Referral Email ID" />
</div>
<div class="form-group text-dark">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkTC" />
<label class="custom-control-label" for="checkTC">
I Agree all the Terms & Condition
</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery,then Popper.js, then Bootstrap.min.js -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/indexnavigation.js"></script>
</body>
</html>【问题讨论】：
-
嗨！ Rohit，你的问题不清楚
标签： html css bootstrap-4