How do I create form with following format[Shown in Picture]- Irrespective of the size of name variable(Name, Mobile,Gender,Age) , all the value receiving blocks are of same size, aligned one below another.
My approach is that two div would be there one with all names and other with all blocks. But it's weird I haven't done anything like this before.
And Can It be done by Bootstrap? I would prefer that.
最佳答案
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rizwan Ali</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Your Required Form with bootstrap</h2>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Mobile:</label>
<div class="col-sm-4">
<input type="number" class="form-control" placeholder="Enter 10 digits">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Alternate Mobile:</label>
<div class="col-sm-4">
<input type="number" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Gender:</label>
<div class="col-sm-4">
<select class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Age:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="pwd" placeholder="In Years">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Date of Dog Bite:</label>
<div class="col-sm-4">
<input type="date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Credit Card Number:</label>
<div class="col-sm-4">
<input type="date" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>关于jquery - 使用 Bootstrap 进行表单对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39180664/