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

Html 如何使用Bootstrap 3对齐表单中的单独行?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在用Bootstrap3在一个水平的表格上和食物作斗争。如果我把每一组表格一个接一个地放在一起,我就没有问题了。检查图像: 但一旦我做了两行,这样我就可以在前3个输入字段的右侧放置一个图像,那一行中的所有内容都会展开,并且底部一行的垂直内容都会被弄乱: 代码如下: <form id="new-user-form" class="form-horizontal"> <div class="row"> <div class="col-sm

我正在用Bootstrap3在一个水平的表格上和食物作斗争。如果我把每一组表格一个接一个地放在一起,我就没有问题了。检查图像:

但一旦我做了两行,这样我就可以在前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>

名义
阿佩利多
乌萨里奥
电子邮件
塞勒尔酒店
菲乔电话

有什么想法吗?提前谢谢

您缺少一行

<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>

名义
阿佩利多
乌萨里奥
电子邮件
塞勒尔酒店
菲乔电话