如何增大Web应用中File Name字段的文本框宽度？

问题原因 #

你的代码里有两个核心问题导致宽度设置不生效：

• input标签自带内联样式style="width: 100%;"，它的优先级高于外部CSS，所以你写的#file-name宽度规则被覆盖了。
• 文本框的父容器是col-md-6，在Bootstrap栅格系统里只占页面宽度的一半，即使文本框设100%宽度，也只能限制在这个容器的范围内。

解决方案 #

1. 移除内联样式

删掉#file-name输入框里的style="width: 100%;"，让外部CSS能控制宽度。

2. 调整父容器宽度

把包含文本框的col-md-6改成更宽的栅格列，比如col-md-12（占满整行）或者col-md-8，根据需求调整。

3. 优化CSS代码

去掉重复的#file-name样式，合并成统一规则：

.custom-file-input {
    width: 100%;
}
#file-name {
    width: 100%; /* 占满父容器宽度 */
    max-width: 800px; /* 可根据需求调整最大宽度 */
}
#file-name::placeholder {
    text-align: center;
}

修改后的完整代码片段 #

HTML部分：

<form action="/display" method="POST" enctype="multipart/form-data">
    <div class="file-container">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="file" name="file" onchange="updateFilename(this)">
            <label class="custom-file-label" for="file">Choose file</label>
        </div>
    </div>
    <div class="row">
        <!-- 把col-md-6改成col-md-12或col-md-8 -->
        <div class="col-md-12 dropdown-container">
            <label for="file-name" class="nowrap"><i class="fas fa-file"></i> File Name:</label>
            <!-- 移除了内联style="width: 100%;" -->
            <input type="text" class="form-control space-below wider-textbox" id="file-name" name="file_name" value="{{ file_name }}" disabled>
        </div>
    </div>
    <!-- 其他表单内容保持不变 -->
    <div class="row">
        <div class="col-md-6 dropdown-container">
            <label for="group-select" class="nowrap"><i class="fas fa-users"></i> Group:</label>
            <select class="form-control" id="group-select" name="group" disabled>
                <option value=""></option>
                <option value="DIA" {% if group == 'DIA' %}selected{% endif %}>DIA</option>
                <option value="BBB" {% if group == 'BBB' %}selected{% endif %}>BBB</option>
                <option value="CCC" {% if group == 'CCC' %}selected{% endif %}>CCC</option>
                <option value="DDD" {% if group == 'DDD' %}selected{% endif %}>DDD</option>
            </select>
        </div>
        <div class="col-md-6 dropdown-container">
            <label for="template-select"><i class="fas fa-file-alt"></i> Template:</label>
            <select class="form-control" id="template-select" name="upload_table" {% if not table_html %}disabled{% endif %} style="background-color: #ffffe4">
                {% for template in template_options %}
                <option value="{{ template[1] }}">{{ template[0] }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="upload-container">
        <button type="submit" class="btn btn-primary" id="display-btn" onclick="enableUploadButton()"><i class="fas fa-eye"></i> Display</button>
    </div>
</form>

这样修改后，File Name文本框就能按照你设置的宽度显示了。

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