模态内部的bootstrap形式未正确对齐 [英] bootstrap form inside modal not aligned properly
本文介绍了模态内部的bootstrap形式未正确对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用bootstrap(水平形式)制作模态表单,并在字段下显示字段。我知道如何修复它,以便输入文本框位于标签的右侧而不是它们下面?
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>
推荐答案
您需要将表单水平声明放入模态体声明。这有效。
You need to place the form-horizontal declaration in with the modal-body declaration. This works.
< div class =modal-body form-horizontal>
这篇关于模态内部的bootstrap形式未正确对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文