如何让HTML中Bootstrap输入组的span文本宽度一致，w-100无效如何解决

问题根因 #

你给.input-group-text添加w-100不生效，是因为它的父元素.input-group-prepend默认是内容自适应宽度，子元素的百分比宽度没有可参照的父级宽度基准，因此设置无法生效。

修复方案 #

给所有.input-group-prepend设置固定基准宽度即可，你可以新增如下自定义CSS规则，无需修改原有HTML的结构：

/* 宽度数值可根据你最长的前缀文本调整，220px足够容纳当前所有站点的前缀文本 */
.input-group-prepend {
  flex: 0 0 220px;
}

如果你不想新增全局CSS，也可以直接给每个.input-group-prepend添加内联样式，示例如下：

<div class="input-group-prepend" style="flex: 0 0 220px;">
  <span class="input-group-text" style="background-color:#ddd;">https://www.facebook.com/</span>
</div>

修改后所有输入组的前缀文本宽度就会保持一致，原来span上的w-100可以保留也可以删除，不影响最终效果。

内容的提问来源于stack exchange，提问作者nonutt