twitter-bootstrap 模态内的引导程序表单未正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19444802/
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
bootstrap form inside modal not aligned properly
提问by user2818430
I tried to make a modal form using bootstrap (horizontal form) and the field are shown under the labels. Any idea how can I fix it so the input text boxes will be at the right of the labels and not under them?
我尝试使用引导程序（水平形式）制作模态表单，并且该字段显示在标签下。知道如何修复它以便输入文本框位于标签的右侧而不是在标签下方吗？
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close specialb" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" class="non-margined">
<div class="control-group">
<label class="control-label" for="firstName">First name:</label>
<div class="controls">
<input type="text" id="firstName" placeholder="FirstName" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastName">Last name:</label>
<div class="controls">
<input type="password" id="lastName" placeholder="LastName" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="emailAddress">Email Address:</label>
<div class="controls">
<input type="password" id="emailAddress" placeholder="EmailAddress" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
回答by Javamav
You need to place the form-horizontal declaration in with the modal-body declaration. This works.
您需要将表单水平声明与 modal-body 声明放在一起。这有效。
<div class="modal-body form-horizontal">
<div class="modal-body form-horizontal">
回答by user2818430
I am using bootstrap v3.3.2. I was in a similar situation yesterday and this is what worked out for me.
我正在使用引导程序 v3.3.2。昨天我处于类似的情况，这对我有用。
<form class="form-horizontal" id="step2">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email-Id</label>
<div class="col-sm-10">
<input id="email" class="form-control" type="email" placeholder="Enter Your Email-Id" />
</div>
</div>
回答by Rohan Kumar
Try this,
试试这个，
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">Remember me</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
