在Bootstrap 4中定义固定宽度的input-group-append div

Question

我正在使用bootstrap 4 函数在输入字段旁边放置一个图标。我想为input-group-append div（包括图标）设置40px的固定宽度。

引导文档说“不支持对单个输入组元素的大小调整。”但我确信必须有一种CSS方式：

html {
  font-size: 16px;
}
html.big {
  font-size: 20px;
}
div {
  font-size: 1em;
}

知道我该怎么做吗？

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>