以下是我所指的代码:http://jsfiddle.net/Rn9ne/1/
如果展开输出窗口使它们没有堆叠,您可以看到右侧的列略微混乱。左侧和右侧具有相同的代码和相同的列跨度。
<div class="col-md-9">
<div class="col-md-9 col-md-offset-3">
<div class="page-header">
<h3>Your Profile</h3>
</div>
<div class="row">
<div class="col-md-6">
<form method="POST" action="" accept-charset="UTF-8" class="form-horizontal"> <div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Name</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Email</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">email@email.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Phone</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">01258989</p>
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
<div class="col-sm-8 col-sm-pad">
<input class="form-control input-block" name="gender" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Player Type</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
</form></div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Name</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Email</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">email@email.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Phone</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">01258989</p>
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
<div class="col-sm-8 col-sm-pad">
<input class="form-control input-sm" name="gender" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Player Type</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
</div>
答案 0 :(得分:2)
使用此HTML - http://jsfiddle.net/Rn9ne/3/
您需要在右侧块中添加“form-horizontal”类。
<div class="col-md-9">
<div class="col-md-9 col-md-offset-3">
<div class="page-header">
<h3>Your Profile</h3>
</div>
<div class="row">
<div class="col-md-6">
<form method="POST" action="" accept-charset="UTF-8" class="form-horizontal"> <div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Name</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Email</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">email@email.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Phone</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">01258989</p>
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
<div class="col-sm-8 col-sm-pad">
<input class="form-control input-block" name="gender" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Player Type</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
</form>
</div>
<div class="col-md-6 form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Name</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Email</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">email@email.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Phone</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">01258989</p>
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
<div class="col-sm-8 col-sm-pad">
<input class="form-control input-sm" name="gender" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Player Type</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-9"><input class="btn btn-lg btn-success btn-block" type="submit" value="Save"></div>
</div>
</div>
答案 1 :(得分:0)
我相信“form-group”类可以在FORM标签中使用。这是你想要实现的目标吗?
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Your Profile</h3>
</div>
<div class="row">
<div class="col-md-6">
<form method="POST" action="" accept-charset="UTF-8" class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Name</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Email</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">email@email.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Phone</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">01258989</p>
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
<div class="col-sm-8 col-sm-pad">
<input class="form-control input-block" name="gender" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Player Type</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form role="form">
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Name</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Email</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">email@email.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Phone</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">01258989</p>
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
<div class="col-sm-8 col-sm-pad">
<input class="form-control input-sm" name="gender" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label col-sm-pad">Player Type</label>
<div class="col-sm-8 col-sm-pad">
<p class="form-control-static">Jon</p>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="btn btn-lg btn-success btn-block" type="submit" value="Save">
</div>
</div>
</div>
</div>
</div>