Bootstrap 4.0 custom-file-input宽度异常的响应式修复方案咨询

使用Bootstrap 4.0与.NET Framework 4.6.2开发表单时，发现附件上传的custom-file-input宽度比其他输入控件更宽。尝试用max-width:80%调整至同宽后，小屏幕下标签与输入框分行显示时，文件上传控件又远短于其他输入框，寻求适配移动端的正确修复方案。

相关代码 #

<div class="form-group row">
    <label class="col-lg-2 col-form-label">Publish Date</label>
    <div class="col-lg-10">
        @Html.TextBoxFor(model => model.PublishDate, new { @class = "form-control", @id = "publishdatetimepicker" })
        <i class="fa-regular fa-calendar-days float-right publish-datetime"></i>
    </div>
</div>

<div class="form-group row">       <!-- 该元素宽度比上方div更宽 -->
    <label class="col-lg-2 col-form-label">PDF Attachment</label>
    <div class="col-lg-10 custom-file">
        <input type="file" class="custom-file-input" id="customfileinput" required>
        <label class="custom-file-label" for="customfileinput">Choose file...</label>
    </div>
</div>

问题截图 #

方案1：用Bootstrap内置类统一宽度 #

Bootstrap的custom-file组件默认宽度行为和普通form-control有差异，直接给custom-file添加w-100类，让它在父容器col-lg-10中占满宽度，同时保持响应式：

修改后的文件上传代码：

<div class="form-group row">
    <label class="col-lg-2 col-form-label">PDF Attachment</label>
    <div class="col-lg-10">
        <div class="custom-file w-100">
            <input type="file" class="custom-file-input" id="customfileinput" required>
            <label class="custom-file-label" for="customfileinput">Choose file...</label>
        </div>
    </div>
</div>

调整后，大屏幕下custom-file会和上方的form-control宽度完全对齐，小屏幕下父容器col-lg-10自动变为100%宽度，custom-file也会跟着占满整行，不会出现过短的情况。

方案2：自定义媒体查询CSS兜底 #

如果方案1效果不佳，可添加自定义CSS，针对不同屏幕尺寸精准调整：

/* 大屏幕（≥992px）下对齐宽度 */
@media (min-width: 992px) {
    .custom-file {
        width: 100%;
        max-width: 100%;
    }
}

/* 小屏幕（<992px）下强制占满父容器 */
@media (max-width: 991px) {
    .custom-file {
        width: 100% !important;
        max-width: 100% !important;
    }
}

将这段代码放入你的样式文件，覆盖Bootstrap默认的custom-file宽度样式，确保全尺寸下都和其他输入框宽度匹配。

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