如何让Bootstrap模态框在平板及手机端实现响应式？

嘿，咱们先把你代码里的问题捋清楚，这些问题正是导致模态框在移动端异常缩放的核心原因：

一、代码中的关键错误点 #

• 缺失Viewport元标签：这是移动端适配的命脉！没有它，手机浏览器会默认把页面按PC宽度渲染再缩放，直接造成了你看到的缩放问题。
• HTML结构不规范：
  • 没有<head>标签，所有样式、脚本、title都应该放在<head>内，你现在直接写在<html>下，浏览器解析容易出问题。
  • <body>和<html>标签都没闭合，会导致页面结构混乱。
• 重复引入Bootstrap CSS：你两次引入了同一个Bootstrap样式文件，既冗余又可能引发样式冲突。
• @font-face语法错误：你把div{font-family:Elivio;}写在了@font-face规则内部，而且没指定字体文件的src属性，这个字体规则完全不起作用。
• 模态框结构不完整：Bootstrap的响应式模态框依赖.modal + .modal-dialog + .modal-content的完整结构，你现在只用到了.modal-header这类子类，没有外层容器，导致Bootstrap的响应式样式无法生效。

二、一步步修复方案 #

1. 添加Viewport元标签 #

在<head>里加入这个标签，强制移动端浏览器按设备宽度渲染页面：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. 使用完整的Bootstrap模态框结构 #

把你的内容放进标准的模态框容器里，示例如下：

<!-- 触发模态框的按钮（按需添加） -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#termsModal">
  查看条款
</button>

<!-- 模态框核心容器 -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="termsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="termsModalLabel" style="text-align: left; font-family: MavenPro-Bold"> SYARAT & KETENTUAN</h4>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <p style="font-family:MavenPro-Regular;"><strong>SYARAT DAN KETENTUAN</strong></p>
        <p>&nbsp;</p>
        <!-- 这里补充你的条款内容 -->
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <div align="left">
          <label class="checkbox-inline">
            <input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" style="font-family:MavenPro-Regular;" />Saya setuju dengan syarat & ketentuan
          </label>&nbsp;
          <br>
          &nbsp;<p><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
        </div>
        <form method="POST" action="pengajuan" align="">
          <input type="submit" name="btncheck" class="btn btn-success" id="btncheck" value="Lanjutkan" />
        </form>
      </div>
    </div>
  </div>
</div>

3. 修正其他代码细节 #

• 移除重复的Bootstrap CSS引入，只保留一次。
• 把所有<link>、<script>、<title>、<style>都移到<head>标签内。
• 修正@font-face的写法（记得替换为你的字体文件路径）：

@font-face {
  font-family: 'Elivio';
  src: url('your-elivio-font-path.woff2') format('woff2'),
       url('your-elivio-font-path.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
div {
  font-family: 'Elivio', sans-serif;
}

• 闭合所有未闭合的<html>、<body>标签。

4. 自定义模态框样式优化 #

确保你的自定义CSS在Bootstrap CSS之后引入，这样才能覆盖默认样式：

.modal-dialog{ 
  padding-top: 100px; 
  border-radius:0; 
} 
.modal-header{ 
  background-color: #F47321; 
} 
.modal-title{ 
  color: white; 
} 
.modal-footer{ 
  background-color: #FFFFFF; 
  margin-top: 0; 
} 
.modal-body{ 
  background-color: #FFFFFF; 
  color: black; 
} 
.orange{ background-color: #F47321; } 
.grey{ background-color: #807874; } 
.title-header{ background-color: #F47321; } 
.body { background-color: #807874; }

三、修复后效果 #

做完这些修改后，移动端浏览器会正确识别设备宽度，Bootstrap的模态框会自动适配屏幕尺寸，不会再出现缩放问题，同时整个页面的HTML结构也符合标准，避免了其他潜在的解析错误。

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