twitter-bootstrap Bootstrap 表单组未正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21315471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 19:49:44 来源:igfitidea点击:
Bootstrap form group not aligning correctly
提问by Jonnerz
Here is the code I am referring too: http://jsfiddle.net/Rn9ne/1/
这也是我指的代码：http: //jsfiddle.net/Rn9ne/1/
If you expand the output window so they are not stacked, you can see that the column on the right is slightly messed up. The left and right have identical code and an identical column span.
如果您展开输出窗口使它们不堆叠，您可以看到右侧的列有些混乱。左侧和右侧具有相同的代码和相同的列跨度。
<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 protected]</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 protected]</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>
回答by Manish Pradhan
Use this HTML - http://jsfiddle.net/Rn9ne/3/
使用此 HTML - http://jsfiddle.net/Rn9ne/3/
You need to add the class "form-horizontal" on the right block.
您需要在右侧块上添加“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 protected]</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 protected]</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>
回答by phteven
I believe "form-group" class works within FORM tags. Is this what you're trying to achieve?
我相信“表单组”类在 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 protected]</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 protected]</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>
