JavaScript中如何在file类型input标签后添加换行或br标签

问题原因 #

你之前尝试添加<br>没生效，是因为Bootstrap的navbar-collapse容器默认是flex布局，且flex-wrap: nowrap（强制不换行），所以<br>在flex容器里无法触发换行效果。

方法一：用<br>强制换行（修改JS+CSS） #

1. 修正JavaScript中的换行逻辑，将<br>直接追加到#browser-first容器中：

if (i % 3 == 0) {
    // 在第3、6...个输入框后插入换行
    $('#browser-first').append('<br>');
}

2. 添加CSS让<br>在flex容器中生效：

#browser-first {
    /* 允许flex元素换行 */
    flex-wrap: wrap;
}

#browser-first br {
    /* 让br占满整行，触发换行 */
    width: 100%;
    display: block;
    content: "";
}

方法二：用CSS Flex布局自动换行（更优雅，无需手动加<br>） #

直接通过CSS控制布局，让输入框自动每3个一行，不需要修改JS的换行逻辑：

#browser-first {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 可选，设置输入框之间的间距 */
}

#browser-first input[type="file"] {
    /* 每个输入框占1/3宽度，减去margin和gap的空间 */
    flex: 0 0 calc(33.333% - 55px);
    margin-right: 40px;
}

这种方式更符合现代布局规范，调整每行数量只需修改calc里的百分比即可。

额外优化提示 #

你代码里的marginright拼写错误，应该是marginRight（JS样式属性需用驼峰命名），否则不会生效：

inputBtn.style.marginRight = '40px';

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