0
Я не могу сделать поля ввода в форме бутстрапа.Поле ввода формы бутстрапа не выравнивается
Вводные поля для имени и фамилии выровнены. Коды ввода для электронной почты, мобильных устройств и сообщений выровнены. Но две группы не выровнены друг с другом. Как я могу это достичь?
Кроме того, вся форма, как представляется, дополняется слева, но доходит до конца с правой стороны, как я могу это понять?
Ниже приведены мои исходные коды:
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>
Hi Natalie. Вы можете отправить ответ ниже, но похоже, что он уже опубликован. Однако мы предпочли бы, чтобы ответы не объединялись в вопросы. Здесь мы не используем [решаемые] теги заголовков. – halfer
Привет, не проблема .. Я медленно разбираюсь в этикете. Благодарю. –
Не беспокойтесь, добро пожаловать в сообщество. – halfer