我不能使输入框以我的引导形式对齐。
Name和Surname的输入框是对齐的。 电子邮件，移动和消息的输入框是对齐的。 但这两个群体并不是一致的。我怎样才能做到这一点？
此外，整个表格在左侧看起来很多，但一直到右侧的结尾，我怎么能这样呢？
以下是我的源代码：
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>
答案 0 :(得分：0)
他们的栏目看起来像我一样。星号使乍一看有点难以辨别。
标签的宽度就是将表单字段推到右边。标签宽度来自col-xs-4类。也许尝试删除星号并将标签类更新为col-xs-3？
祝你好运。