css – Twitter引导3个单行的表单和多个输入列

前端之家收集整理的这篇文章主要介绍了css – Twitter引导3个单行的表单和多个输入列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要将多列输入放在单行中,如下所示:

我通过对单个表单组中的多个输入进行分组,但是我不能使用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接近你的需要:
<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>

对准取决于屏幕的宽度,因此请务必根据需要进行调整。然后,您可以自己设计输入。

猜你在找的CSS相关文章