在Bootstrap 4中定义固定宽度input-group-append div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Bootstrap 4中定义固定宽度input-group-append div相关的知识，希望对你有一定的参考价值。
我正在使用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的主要内容，如果未能解决你的问题，请参考以下文章