输入形式的跨度大小的固定长度

时间:2015-10-16 10:04:19

标签: html css forms input

我有一个带有一些输入标签的表单和每个表单(我使用bootstrap)。我想使用带有背景色彩的跨度,但是它的大小有问题,因为取决于文本长度(最好的方法是使用真棒,但我没有找到对我的目的有用的图标)。 有没有办法来修复div的灰色部分的宽度?我尝试使用宽度,如图像,但它调整所有输入字段的大小。谢谢 enter image description here

<div class="row">
<!-- Fleet fields -->
<div class="col-xs-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="fa fa-car fa-fw"></i> Fleet inputs
        </div>
        <!-- /.panel-heading -->
        <div class="panel-body">
            <form role="form">
                <div class="form-group input-group">
                    <span class="input-group-addon">Ap</span> <input type="text"
                        class="form-control" placeholder="Application">
                </div>
                <div class="form-group input-group">
                    <input type="text" class="form-control" placeholder="Cubic">
                    <span class="input-group-addon">cm<sup>3</sup></span>
                </div>
                <div class="form-group input-group">
                    <input type="number" class="form-control" placeholder="Power">
                    <span class="input-group-addon">H P</span>
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon">Eu</span> <input type="text"
                        class="form-control" placeholder="Euro class"> 
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon">Et</span> <input type="text"
                        class="form-control" placeholder="Engine type">
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon">Tr</span> <input type="text"
                        class="form-control" placeholder="Traction">
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon">Ts</span> <input type="text"
                        class="form-control" placeholder="Transmission">
                </div>
                <div class="form-group">
                    <label>Note</label>
                    <textarea class="form-control" rows="2" maxlength="100"></textarea>
                </div>

            </form>
        </div>
        <!-- /.panel-body -->
    </div>
</div>

输入-group-addon的Css     。输入基团的附加{颜色:#3c763d;背景色:#dff0d8;边框颜色:#3c763d}

1 个答案:

答案 0 :(得分:0)

你可以使用div的灰色部分的固定宽度

&#13;
&#13;
you can use for fixed width of grey part of div

1.<div class="input-group input-group-lg">   <span class="input-group-addon" id="sizing-addon3">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> </div>

2. can use also another div <div class="input-group input-group-sm">
3. can use also <div class="input-group">


for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
&#13;
&#13;
&#13;

对于Icon你可以使用Class =&#34; fa fa-edit&#34;或类=&#34; glyphicon glyphicon-pencil&#34;