0
ブートストラップ形式で入力ボックスを揃えることができません。ブートストラップ形式の入力ボックスがアライメントされていません
名前と姓の入力ボックスが揃っています。 電子メール、モバイル、およびメッセージの入力ボックスが揃っています。 しかし、2つのグループは互いに整列していません。どうすればこれを達成できますか？
また、フォーム全体が左側に多くパッディングされているように見えますが、右側の端までずっと進みますが、これをどうすればできますか？
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">
\t <span class="sr-only">Toggle navigation</span>
\t <span class="icon-bar"></span>
\t <span class="icon-bar"></span>
\t <span class="icon-bar"></span>
\t </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="[email protected]" 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>
こんにちはナタリー。あなたは下の回答を投稿することは大歓迎ですが、すでに投稿されているようです。しかし、私たちはむしろ答えが質問に溶け込まないようにしたいと考えています。ここでは[解決済み]タイトルタグは使用しません。 – halfer
こんにちは、問題はありません。私はゆっくりとエチケットを理解しています。ありがとう。 –
心配しないで、コミュニティにようこそ。 – halfer