Question

我使用bootstrap horitonzal形式，这是有效的但是我每行有3个表单，但是我希望有一个表单来获得与具有多行的水平表单相同的效果。但是我每行有3个表单，但是我希望有一个表单来获得与具有多行的水平表单相同的效果。

我的想法是进行验证，为此我需要将所有输入都包含在一个表单中

<form class="form-horizontal" name="frm1" role="form">
    <div class="form-group">

        <label for="txtNombre" class="col-sm-2 control-label">Nombre</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" id="txtNombre" ng-model="model.nombre" placeholder="Rut">
        </div>


        <label for="txtRut" class="col-sm-1 control-label">Rut</label>
        <div class="col-xs-2">
            <input type="text" class="form-control" id="txtRut" placeholder="Rut">
        </div>
        <div class="col-sm-1">
            <input type="password" id="txtDv" class="form-control" id="inputPassword3" placeholder="Dv">
        </div>
    </div>
</form>

<form class="form-horizontal" role="form">
    <div class="form-group">

        <label for="txtMail" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="txtMail" placeholder="e-mail">
        </div>


        <label for="txtAlias" class="col-sm-1 control-label">Alias</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" id="txtAlias" placeholder="Alias">
        </div>
    </div>
</form>

<form class="form-horizontal" role="form">
    <div class="form-group">

        <label for="selEmpresa" class="col-sm-2 control-label">Empresa</label>
        <div class="col-sm-3">
            <select class="form-control" id="selEmpresa">
                <option>Audi</option>
            </select>
        </div>


        <label for="chkActive" class="col-sm-1 control-label">Activo</label>
        <div class="col-xs-3">
            <input type="checkbox" id="chkActive">
        </div>
    </div>
</form>

Answer 1

使用下面的行和列可以很容易地实现

<form class="form-horizontal" name="frm1" role="form">
<div class="row">
    <div class="col-md-12">
        <div class="form-group">

            <label for="txtNombre" class="col-sm-2 control-label">Nombre</label>
            <div class="col-xs-3">
                <input type="text" class="form-control" id="txtNombre" ng-model="model.nombre" placeholder="Rut">
            </div>


            <label for="txtRut" class="col-sm-1 control-label">Rut</label>
            <div class="col-xs-2">
                <input type="text" class="form-control" id="txtRut" placeholder="Rut">
            </div>
            <div class="col-sm-1">
                <input type="password" id="txtDv" class="form-control" id="inputPassword3" placeholder="Dv">
            </div>
        </div>

</div></div>
    <div class="row">
    <div class="col-md-12">
        <div class="form-group">

            <label for="txtMail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="txtMail" placeholder="e-mail">
            </div>


            <label for="txtAlias" class="col-sm-1 control-label">Alias</label>
            <div class="col-xs-3">
                <input type="text" class="form-control" id="txtAlias" placeholder="Alias">
            </div>
        </div>
    </div></div>

    <div class="row">
    <div class="col-md-12">
        <div class="form-group">

            <label for="selEmpresa" class="col-sm-2 control-label">Empresa</label>
            <div class="col-sm-3">
                <select class="form-control" id="selEmpresa">
                    <option>Audi</option>
                </select>
            </div>


            <label for="chkActive" class="col-sm-1 control-label">Activo</label>
            <div class="col-xs-3">
                <input type="checkbox" id="chkActive">
            </div>
        </div>
    </div>
    </div>
    </form>

形成水平引导程序

1 个答案: