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

【问题标题】：Define fixed width input-group-append div in Bootstrap 4在 Bootstrap 4 中定义固定宽度的 input-group-append div
【发布时间】：2018-08-20 11:18:21
【问题描述】：

我正在使用 bootstrap 4 input group 函数在输入字段旁边放置一个图标。我想为 input-group-append 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>

知道我该怎么做吗？

【问题讨论】：

Bootstrap 不支持...如果添加宽度会怎样？
它被忽略了，可能是因为它是基于flex的。
Flexbox 仍应接受宽度，即使它是 flex: 0 0 40px;
之前在 .input-group-append 上试过，但没有改变宽度。
它会在图标上（.input-group-text），而不是 .input-group-append

标签： css twitter-bootstrap flexbox bootstrap-4

【解决方案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>

【讨论】：

你的意思是什么？