我无法弄清楚如何将包含“Go”按钮的div垂直对齐到底部。竖直对齐引导行内的div
我尝试了几件事但没有工作。
这里是一个的jsfiddle:https://jsfiddle.net/2fzq3xb3/2/
这里是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
\t <div class="row" style="position: relative;">
\t \t <div class="col-xs-10">
\t \t <div class="row">
\t \t <div class='col-xs-6'>
\t \t <div class="form-group">
\t \t \t <label for="start-date">Start date</label>
\t \t <div class='input-group date' id='start-date'>
\t \t <input type='text' class="form-control" id='start_date' name='start_date' />
\t \t <span class="input-group-addon">
\t \t <span class="glyphicon glyphicon-calendar"></span>
\t \t </span>
\t \t </div>
\t \t </div>
\t \t </div>
\t \t <div class='col-xs-6'>
\t \t <div class="form-group">
\t \t \t <label for="end-date">End date</label>
\t \t <div class='input-group date' id='end-date'>
\t \t <input type='text' class="form-control" id='end_date' name='end_date' />
\t \t <span class="input-group-addon">
\t \t <span class="glyphicon glyphicon-calendar"></span>
\t \t </span>
\t \t </div>
\t \t <?php
\t \t ?>
\t \t </div>
\t \t </div>
\t \t </div>
\t \t </div>
\t <div class="col-xs-2" style="position: relative; bottom: 50%;transform: translateY(-50%);">
\t \t <button type="submit" class="btn btn-primary btn-xs">Go</button>
\t </div>
\t </div>
</form>
</div>
</body>
</html>
感谢
没有工作 –
确保您设置了家长和孩子的高度。 – Korgrue