Используя Bootstrap 3 и упрощенный код снизу, я не могу понять, почему первая форма смещается немного вверх по сравнению с двумя другими формами в строке:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- our own css -->
<link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container-fluid text-center">
<div><h1><b>bohoo</b></h1></div>
<br />
<hr>
<div class="row">
<div class="form-group">
<div class= "col-sm-3 col-md-3 col-lg-3 col-lg-offset-1 col-md-offset-1 col-lg-offset-1 gray">
<h3>here's a title</h3>
<form action="." method="post">
{{numberform}}
<p> </p>
<input type="submit" class="btn btn-primary" name="x" value="A value">
<input type="submit" class="btn btn-warning" name="y" value="A value">
</form>
<br>
</div>
</div>
<div class="form-group move-right">
<div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
<h3>here's a title</h3>
<form action="." method="post">
{{textform}}
<input type="submit" class="btn btn-primary" name="z" value="A value">
<input type="submit" class="btn btn-warning" name="y" value="A value">
</form>
<br>
</div>
</div>
<div class="form-group move-right">
<div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
<h3>uuu a title</h3>
<form action="." method="post" enctype="multipart/form-data">
{{fileform}}
<input type="submit" class="btn btn-primary" name="a" value="A value">
<input type="submit" class="btn btn-warning" name="b" value="A value">
</form>
<br>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<hr>
<h3><b>Result:</b></h3>
<div class="col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
{{result}}
</div>
</div>
</div>
</div>
</body>
</html>
Вот результатв Chrome, протестировано на нескольких экранах и размерах:
![Form shifting to the top. Screenshot[1]](https://i.stack.imgur.com/Tb8FR.png)
А вот мой style.css:
.gray {
background-color: #f2efef;
border-radius: 15px;
}
.move-right {
padding-left: 200pt;
}
Я не могу понять, что может вызватьпервая форма слева, чтобы немного срать на вершину.Я пробовал всевозможные уловки, чтобы исправить это, но отступы, добавление отступа и даже добавление <br> s не помогли.
Спасибо.