我需要将多列输入放在单行中,如下所示:
我通过对单个表单组中的多个输入进行分组,但是我不能使用has-error类。
<div class="form-group"> <label class="control-label col-sm-4">Quarter</label> <input type="text" class="col-sm-20" /> </div> <div class="form-group"> <label class="control-label col-sm-4">Address</label> <input type="text" class="col-sm-15" /> <label class="control-label col-sm-2">Addr. №</label> <input type="text" class="col-sm-3" /> </div> <div class="form-group"> <label class="control-label col-sm-4">Block name/Number</label> <input type="text" class="col-sm-5" /> <label class="control-label col-sm-2">Entrance</label> <input type="text" class="col-sm-3" /> <label class="control-label col-sm-2">Floor</label> <input type="text" class="col-sm-3" /> <label class="control-label col-sm-2">Apartament</label> <input type="text" class="col-sm-3" /> </div>
那么每个输入框可以有多个表单组?
解决方法
为了简化引导3中的事情,您应该使用
Grid System。
这是一个 fiddle接近你的需要:
这是一个 fiddle接近你的需要:
<body> <form class="form-horizontal"> <div class="row"> <div class="form-group"> <label class="col-sm-2">Quarter</label> <div class="col-sm-10"><input type="text" class="form-control" /></div> </div> </div> <div class="row"> <div class="form-group"> <label class="col-sm-2">Address</label> <div class="col-sm-5"><input type="text" class="form-control" /></div> </div> <div class="form-group"> <label class="col-sm-2">Addr. №</label> <div class="col-sm-3"><input type="text" class="form-control" /></div> </div> </div> <div class="row"> <div class="form-group"> <label class="col-sm-2">Block name/Number</label> <div class="col-sm-1"><input type="text" class="form-control" /></div> </div> <div class="form-group"> <label class="col-sm-1">Entrance</label> <div class="col-sm-1"><input type="text" class="form-control" /></div> </div> <div class="form-group"> <label class="col-sm-1">Floor</label> <div class="col-sm-1"><input type="text" class="form-control" /></div> </div> <div class="form-group"> <label class="col-sm-2">Apartament</label> <div class="col-sm-3"><input type="text" class="form-control" /></div> </div> </div> </form> </body>
对准取决于屏幕的宽度,因此请务必根据需要进行调整。然后,您可以自己设计输入。