所以我创建了一个登录页面,但是登录,取消和注册按钮将从容器中溢出。我该如何解决这个问题,我试图更改我什至尝试用0结果搜索到Google的利润。这是我的代码。
代码: 格式的HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1
/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/
popper.js/1.14.7/umd/popper.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/
js/bootstrap.min.js">
</script>
<link rel = "stylesheet" href = "Stylesheet_form.css">
</head>
<!--Javascript-->
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-
validation');
var validation = Array.prototype.filter.call(forms,
function(form) {
form.addEventListener('submit', function(event)
{
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<body class = "main">
<div class="container">
<h2>Login</h2>
<fo rm action="action_page.php" class="needs-
validation" novalidate>
<div class="form-group">
<label for="StudentId">StudentId:</label>
<input type="text" class="form-control"
id="StudentId" placeholder="Enter
StudentId" name="StudentId" required>
<div class="valid-feedback">Valid.
</div>
<div class="invalid-
feedback">Please fill out this
field.</div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-
control" id="n/p" placeholder="Password"
name="Password" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please
fill out this field.</div>
</div>
<div id = "forget">
<a href="#">Forget Password</a>
</div>
<button id="login" type="submit" class="btn
btn-success">Login</button>
<div class = "btn-group">
<button id="register" type="submit"
class="btn btn-
primary">Register</button>
<button id="cancel" type="submit"
class="btn btn-danger">Cancel</button>
</div>
</form>
</div>
</body>
</html>
CSS
.main{
background-color: rgb(2,48,97);
font-family: 'Roboto','Microsoft YaHei', 'Microsoft JhengHei',
sans- serif;
padding:0;
margin:0px;
/*background-image: url("Images/background.jpg");
background-repeat:no-repeat;
background-position: center;
background-size: auto;*/
}
h2{
text-align: center;
}
.container{
background-color: rgb(233,233,233);
margin-top:80px;
height: 448px;
padding-top:20px;
}
.form{
padding-top:20px;
}
#forget{
font-size: 15px;
}
#login{
width: 1050px;
margin:30px 20px 0px 20px;
font-size: 19px;
}
#cancel.btn-primary{
width:77px;
}
.btn-group{
margin:15px 20px 0px 20px;
width: 1050px;
display: flex;
}
结果:
谢谢您的帮助。 抱歉,如果我有很多代码。 bla bla (只需忽略此评论部分)
答案 0 :(得分:1)
遵循这些基本修补程序
.main{
background-color: rgb(2,48,97);
font-family: 'Roboto','Microsoft YaHei', 'Microsoft JhengHei',
sans- serif;
padding:0;
margin:0px;
}
h2{
text-align: center;
}
.container{
background-color: rgb(233,233,233);
margin-top:80px;
height: 448px;
padding-top:20px;
width: 960px;
}
.form{
padding-top:20px;
}
#forget{
font-size: 15px;
}
#login{
width: 960px;
margin:30px 20px 0px 20px;
font-size: 19px;
}
#cancel.btn-primary{
width:77px;
}
.btn-group{
width: 100%;
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<!--Javascript-->
<body class = "main">
<div class="container">
<h2>Login</h2>
<form action="action_page.php" class="needs-
validation" novalidate>
<div class="form-group">
<label for="StudentId">StudentId:</label>
<input type="text" class="form-control" id="StudentId" placeholder="Enter StudentId" name="StudentId" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="passowrd" placeholder="Password" name="Password" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<a href="#">Forget Password</a>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-success">Login</button>
</div>
<div class="btn-group">
<button type="submit" class="btn btn-info">Register</button>
<button type="submit" class="btn btn-danger">Cancel</button>
</div>
</div>
</form>
</div>
</body>
</html>
答案 1 :(得分:0)
您会看到#login
和btn-group
在代码中指定了width:1050px
。将其设置为width:100%
并设置正确的margin
#login{
width: 100%;
margin:10px 0;
font-size: 19px;
}
.btn-group{
width: 100%;
display: flex;
}
这是工作片段
.main {
background-color: rgb(2, 48, 97);
font-family: 'Roboto', 'Microsoft YaHei', 'Microsoft JhengHei', sans- serif;
padding: 0;
margin: 0px;
/*background-image: url("Images/background.jpg");
background-repeat:no-repeat;
background-position: center;
background-size: auto;*/
}
h2 {
text-align: center;
}
.container {
background-color: rgb(233, 233, 233);
margin-top: 80px;
height: 448px;
padding-top: 20px;
}
.form {
padding-top: 20px;
}
#forget {
font-size: 15px;
}
#login {
width: 100%;
margin: 10px 0;
font-size: 19px;
}
#cancel.btn-primary {
width: 77px;
}
.btn-group {
width: 100%;
display: flex;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body class="main">
<div class="container">
<h2>Login</h2>
<form action="action_page.php" class="needs-
validation" novalidate>
<div class="form-group">
<label for="StudentId">StudentId:</label>
<input type="text" class="form-control" id="StudentId" placeholder="Enter StudentId" name="StudentId" required>
<div class="valid-feedback">Valid.
</div>
<div class="invalid-feedback">Please fill out this field.
</div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="n/p" placeholder="Password" name="Password" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div id="forget">
<a href="#">Forget Password</a>
</div>
<button id="login" type="submit" class="btn
btn-success">Login</button>
<div class="btn-group">
<button id="register" type="submit" class="btn btn-info">Register</button>
<button id="cancel" type="submit" class="btn btn-danger">Cancel</button>
</div>
</form>
</div>
</body>
答案 2 :(得分:0)
您应该具有100%的宽度减去两侧的边距
#login{
width: calc(100% - 40px);
margin:30px 20px 0px 20px;
font-size: 19px;
}
.btn-group{
margin:15px 20px 0px 20px;
width: calc(100% - 40px);
display: flex;
}