[英]How to align a checkbox and a form horizontally?
我想創建一個表格,並在其旁邊有一個復選框。 當前,它看起來像這樣:
因此,該復選框與表單的標簽對齊,即它們在頂部對齊,但我希望兩者都在底部對齊。
應該怎么做?
這是我的代碼:
<!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>
嘗試這個
<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.