我无法使输入框在我的 Bootstrap 表单中对齐。
Name 和 Surname 的输入框是对齐的。 Email、Mobile 和 Message 的输入框对齐。 但是这两个群体彼此并不一致。我怎样才能做到这一点？
此外，整个表单的左侧似乎填充了很多，但在右侧一直填充到末尾，我该如何平衡呢？
下面是我的源代码:
body {
background-color: white;
padding-top: 80px;
padding-bottom: 30px;
background-size: cover;
}
.navbar {
background: rgba(255, 255, 255, 0.7) !important;
font-family: 'Raleway', sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
letter-spacing: 3px;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #8b0000 !important;
}
div#container {
/* outermost box */
font-family: 'Raleway', sans-serif;
position: relative;
width: 75% !important;
margin: 0px auto;
border: 0px;
background: rgba(255, 255, 255, 0.85);
padding: 10px;
overflow: hidden;
/* keeps form within container, but gets eaten up in smaller frame */
}
.control-label {
color: black;
font-size: 18px;
text-align-last: right;
}
/*
.form-group {
background-color: black;
}
*/
#container img {
padding-top: 40px;
padding-bottom: 20px;
border: 0px;
max-width: 60%;
height: auto;
}
h2 {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
/* or 1.9rem. em is relative to the font-size of its direct or nearest parent. rem is relative to the html (root) font-size. */
p {
font-size: 19px;
padding-left: 30px;
padding-right: 30px;
}
input[type=text],
select {
width: 99%;
height: 25px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 3px;
padding-right: 3px;
margin: 2px 1px;
background: #ffffff;
}
input[type=email],
select {
width: 99%;
height: 25px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 3px;
padding-right: 3px;
margin: 2px 1px;
background: #ffffff;
}
input[type=tel],
select {
width: 99%;
height: 25px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 3px;
padding-right: 3px;
margin: 2px 1px;
background: #ffffff;
}
textarea {
resize: vertical !important;
}
input[type=submit] {
background-color: white;
border: 1px solid black !important;
color: black;
font-size: 15px;
width: 80px;
height: 30px;
padding: 5px;
display: block;
margin: 10px auto;
}
input[type=submit]:hover {
background-color: white;
border: 1px solid grey !important;
color: cornflowerblue;
}
end {
color: #555555;
font-size: 16px;
font-family: raleway;
}<!DOCTYPE HTML>
<html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SITE</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">SITE</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav navbar-right">
<li><a href="" target="_blank"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Link one</a></li>
<li><a href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Link two</a></li>
</ul>
</div>
</div>
</nav>
<div id="container">
<center><img src=""></center>
<div class="col-lg-12">
<h2>Below there's a form that needs some work!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel eros et metus aliquet malesuada in et nunc. In lobortis, sem non mollis rutrum, quam dolor aliquet lacus, et tempus nibh sapien sit amet risus. Suspendisse vel lorem tortor. Praesent
id ultricies libero, sed dictum purus. Maecenas eu metus et mi mollis accumsan in ut ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In efficitur arcu elit, quis tincidunt lectus varius ac.
Integer ornare tellus sit amet nulla feugiat scelerisque. Phasellus pharetra erat in malesuada dictum. Maecenas non pulvinar tellus. Suspendisse fringilla nulla ut nunc mattis, condimentum interdum tortor imperdiet. Quisque consequat viverra
justo sed porttitor.</p>
</div>
<p></p>
<h2>Contact us!</h2>
<form class="form-horizontal" name="enquiryform" method="post" action="form.php">
<div class="form-group-lg">
<label class="control-label col-xs-4" for="name">Name *</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="name" placeholder="First name" name="name" required>
</div>
</div>
<div class="form-group-lg">
<label class="control-label col-xs-4" for="surname">Surname</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="surname" placeholder="Last name" name="surname">
</div>
</div>
<div class="form-group-lg">
<label class="control-label col-xs-4" for="email">Email *</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="email" placeholder="you@example.com" name="email" required>
</div>
</div>
<div class="form-group-lg">
<label class="control-label col-xs-4" for="mobile">Mobile</label>
<div class="col-xs-8">
<input type="tel" class="form-control" id="mobile" placeholder="Phone number" name="mobile">
</div>
</div>
<div class="form-group-lg">
<label class="control-label col-xs-4" for="message">Message *</label>
<div class="col-xs-8">
<textarea class="form-control col-xs-8" id="message" rows="6" name="message" placeholder="Do you want to find/become a tutor? Suburb? Date/time?..." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input type="submit" class="btn btn-default" value="Submit">
</div>
</div>
</form>
<center>
<end>Company Pty Ltd</end>
</center>
</div>
<p></p>
</body>
</html>最佳答案
它们的列在我看来是排成一排的。星号让人乍一看有点难以分辨。
标签的宽度是将表单字段推到右边的原因。标签宽度来自 col-xs-4 类。也许尝试删除星号并将标签类更新为 col-xs-3？
关于html - Bootstrap 表单输入框未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42403853/