在引导程序 4 中定义固定宽度的输入组追加 div

Question

我正在使用引导 4 输入组函数在输入字段旁边放置一个图标。我想为输入组追加div(包括图标(设置一个 40px 的固定宽度。

引导文档显示"不支持对单个输入组元素进行大小调整"。但我相信一定有一种 CSS 方法可以做到这一点：

<div class="form-group">
<label>Some label</label>
<div class="input-group">
<input type="text" class="form-control"/>
<div class="input-group-append">
<i class="icon"></i>
</div>
</div>
</div>

知道我该怎么做吗？

Answer 1

尝试使用!important防止覆盖

.input-group-append{
width:40px!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group">
<label>Some label</label>
<div class="input-group">
<input type="text" class="form-control"/>
<div class="input-group-append">
<i class="icon">icon</i>
</div>
</div>
</div>