如何将Bootstrap开发的图片上传页面适配为移动端响应式？

问题根因 #

你当前的响应式问题主要来自几处硬编码的非响应式样式：

• 自定义的.container2和.alert固定设置padding-left:40%，移动端屏幕宽度小，左侧留白占比过高导致内容区宽度不足，出现按钮重叠、内容溢出的问题
• 动态生成的预览图固定宽高为300px * 300px，没有做最大宽度限制，小屏下必然超出视口
• 外层容器硬编码height:1000px，还有部分按钮写死固定宽高，都破坏了Bootstrap默认的响应式规则

具体修复步骤 #

1. 替换自定义的非响应式CSS #

将你<style>标签里的内容替换为以下代码：

body,
html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #7abecc !important;
}
.material-icons {
    vertical-align: middle;
}
/* 用自适应的居中规则代替固定左侧padding，适配所有屏幕尺寸 */
.container2{
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
}
.alert{
    text-align: center;
    padding: 1rem !important;
}
/* 给动态生成的预览图加全局响应式规则 */
.preview-img {
    max-width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-top: 20px;
    border: thick solid #ffffff;
    border-radius: 25px;
}

2. 修改外层容器的硬编码样式 #

把原代码里的外层container标签：

<div class="container"style="height:1000px;Max-width:100%;">

替换为：

<div class="container py-3">

3. 修改按钮布局，避免重叠 #

把container2里的两个按钮包裹在Bootstrap的flex容器里，小屏自动换行：

<div class="d-flex flex-wrap gap-2 mb-3">
    <input type="button" class="btn btn-success cc" name="add_image" id="add_image" value="Add Image">
    <input type="submit" class="btn btn-success" value="Upload & Save Data">
</div>

同时去掉导航栏里<a href="" class="btn btn-danger my-2 mx-3"上的行内固定宽高样式style="width:130px;height:36px;"，让Bootstrap自动适配尺寸。

4. 修改动态生成预览图的JS代码 #

把原来写死的宽高样式替换为类名调用：

document.getElementById("add_image").onclick=function (ev) {
    var image=document.getElementById("images");
    var preview=document.createElement("img");
    // 替换硬编码样式，用预定义的响应式类
    preview.className = "preview-img";

    var newInput=document.createElement("input");
    newInput.type="file";
    newInput.name="file[]";
    newInput.classList.add("d-block", "my-2");
    
    var br=document.createElement("br");
    var br1=document.createElement("br");

    newInput.onchange=function(ev1){
        if(this.files && this.files[0])
        {
            var fileReader=new FileReader();
            fileReader.onload=function(ev2){
                preview.src=ev2.target.result;
            };
            fileReader.readAsDataURL(this.files[0])
        }
    };
   
    image.appendChild(newInput)
    image.appendChild(preview);
    image.appendChild(br);
    image.appendChild(br1);
}

以上修改全部完成后，页面就可以适配移动端：按钮不会重叠，预览图会自动适配屏幕宽度不会超出，所有内容都会居中显示在不同尺寸的设备上。

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