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

Posted 2021-03-27

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

知道怎么做吗？

答案

尝试使用!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>

以上是关于在Bootstrap 4中定义固定宽度input-group-append div的主要内容，如果未能解决你的问题，请参考以下文章