Question

我只是想在顶部放置标签的水平形式。请记住，我将添加验证，因此分组很重要

我正在寻找类似的东西

Name        email                 ID
Mike        Mike@hotmail.com      something

代码

      <div class="col-lg-12">
    <div class="row">
        <div class="page-content">
            <div class="panel panel-primary">

                    <form name="searchform" role="form" >
                        <fieldset>
                            <legend></legend>

                            <div class="form-horizontal">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">



                            </div>
                            <div class="form-horizontal">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-horizontal">
                                <label for="exampleInputPassword1">Employee ID</label>
                                <input type="text" class="form-control" id="exampl">
                            </div>
                          </fieldset>
                    </form>

            </div>
        </div>
    </div>
</div>

Answer 1

这对我有用...让我知道是否有更好的解决方案

  <form name="searchform" role="form" novalidate>
                    <fieldset>
                        <legend></legend>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="Name" class="control-label"> Name</label>
                                    <input type="text" value='' class="form-control" id="Name" placeholder="Name">
                                </div>
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="associateID" class="control-label">Associate ID</label>
                                    <input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
                                </div>
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="ID" class="control-label">ID</label>
                                    <input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
                                </div>
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="Role" class="control-label">Gateway Role</label>
                                    <p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="Name" class="control-label">Location</label>
                                    <input type="text" value='' class="form-control" id="Name" placeholder=" Name">
                                </div>
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="associateID" class="control-label">Associate ID</label>
                                    <input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
                                </div>
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="racfID" class="control-label">ID</label>
                                    <input type="text" value='' class="form-control" id="ID" placeholder="ID">
                                </div>
                                <div class="form-group col-xs-3 col-md-3">
                                    <label for="gatewayRole" class="control-label">Role</label>
                                    <p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>

bootstrap表单布局-水平，顶部带有标签

1 个答案: