如何使用Bootstrap 3对齐表单中的单独行？

Question

我正在使用Bootstrap 3在水平表格上挣扎。如果我一个接一个地放置每个表单组，我没有问题。检查图像：

但是，一旦我创建了2行，所以我可以将图像放在前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&oacute;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&oacute;digo de Area" type="tel">
                    </div>
                    <div class="col-xs-7 col-sm-8">
                        <input class="form-control" name="telcelular" placeholder="Tel&eacute;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&oacute;digo de Area" type="tel">
                    </div>
                    <div class="col-xs-7 col-sm-8">
                        <input class="form-control" name="telfijo" placeholder="Tel&eacute;fono Fijo" type="tel">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

有什么想法吗？提前谢谢！

Answer 1

你错过了一行。

<form id="new-user-form" class="form-horizontal">
    <div class="row">
        <div class="col-sm-9">
            <div class="form-group">
<div class="row">
                <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>

            <div class="form-group">
<div class="row">
                <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>

            <div class="form-group">
<div class="row">
                <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>

        <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&oacute;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&oacute;digo de Area" type="tel">
                    </div>
                    <div class="col-xs-7 col-sm-8">
                        <input class="form-control" name="telcelular" placeholder="Tel&eacute;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&oacute;digo de Area" type="tel">
                    </div>
                    <div class="col-xs-7 col-sm-8">
                        <input class="form-control" name="telfijo" placeholder="Tel&eacute;fono Fijo" type="tel">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>