[英]How to align a checkbox and a form horizontally?
I want to create a form and have a checkbox next to it. 我想创建一个表格,并在其旁边有一个复选框。 Currently, it looks like this: 当前,它看起来像这样:
So, the checkbox aligns with the form's label ie they are aligned at top but I would like to have both aligned at bottom. 因此,该复选框与表单的标签对齐,即它们在顶部对齐,但我希望两者都在底部对齐。
How should this be done? 应该怎么做?
This is my code: 这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">Select something!</h3>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="some_selection">Select something</label>
<select class="form-control" id="some_selection">
<option selected>--None--</option>
<option>foo</option>
<option>bar</option>
</select>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="some_id">I should be far lower
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Try this 尝试这个
<div class="container">
<div class="header">
<h3 class="text-muted">Select something!</h3>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="some_selection">Select something</label>
</div>
<div class="col-xs-6">
<select class="form-control" id="some_selection">
<option selected>--None--</option>
<option>foo</option>
<option>bar</option>
</select>
</div>
<div class="col-xs-6">
<input class="form-check-input" type="checkbox" value="" id="some_id">I should be far lower
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.