我有一个带有一些输入标签的表单以及每个标签(我正在使用 Bootstrap )。我想将 span 与背景颜色一起使用,但我对它的大小有疑问,因为它取决于文本长度(最好的方法是使用 awesome,但我找不到对我的目的有用的图标)。 有没有办法固定div灰色部分的宽度?我试过宽度,就像图像一样,但它调整了所有输入字段的大小。谢谢
<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>
输入组插件的CSS .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}
最佳答案
你可以使用div的灰色部分的固定宽度
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"
对于图标,您可以使用 Class="fa fa-edit"或 Class="glyphicon glyphicon-pencil"
关于html - 输入形式中span size的固定长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33167744/