0
我在使用Bootstrap 3的水平表单上苦苦挣扎。如果我把每个表单组都一个接一个,我没有问题。检查图像: 如何使用Bootstrap 3将表单中的单独行对齐?
但是,一旦我做两行,所以我可以把图像前3个输入栏的右侧,一切该行扩展,并与排在底部垂直滋养品得到全乱了:
下面的代码:
<form id="new-user-form" class="form-horizontal">
<div class="row">
<div class="col-sm-9">
<div class="form-group">
<label class="col-md-2 control-label">Nombre</label>
<div class="col-md-10">
<input class="form-control" name="fname" placeholder="Nombre" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Apellido</label>
<div class="col-md-10">
<input class="form-control" name="lname" placeholder="Apellido" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Usuario</label>
<div class="col-md-10">
<input class="form-control" name="username" placeholder="Nombre de Usuario" type="text" disabled="">
</div>
</div>
</div>
<div class="col-sm-3"><div class="form-group">
<div class="col-md-12 text-center">
<img src="img/mysteryman.png" />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-10">
<input class="form-control" name="emailaddress" placeholder="Dirección de e-mail" type="email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Tel. Celular</label>
<div class="col-md-10 no-padding">
<div class="col-xs-5 col-sm-4">
<input class="form-control" name="codtelcelular" placeholder="Código de Area" type="tel">
</div>
<div class="col-xs-7 col-sm-8">
<input class="form-control" name="telcelular" placeholder="Teléfono Celular" type="tel">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Tel. Fijo</label>
<div class="col-md-10 no-padding">
<div class="col-xs-5 col-sm-4">
<input class="form-control" name="codtelfijo" placeholder="Código de Area" type="tel">
</div>
<div class="col-xs-7 col-sm-8">
<input class="form-control" name="telfijo" placeholder="Teléfono Fijo" type="tel">
</div>
</div>
</div>
</div>
</div>
</form>
任何想法?提前致谢!