Bootstrap不提供定位能力，核心是navigator.geolocation；需处理异步失败、添加loading与错误提示、用Bootstrap组件展示结果、确保移动端按钮可点击、禁止自动定位、并兼容不同浏览器的error.code。
Bootstrap 本身不提供地理位置定位能力，navigator.geolocation 才是核心，Bootstrap 只负责让定位结果在移动端看起来清晰、响应及时、按钮可点。
定位失败时页面卡住？先加 loading 状态和错误兜底
用户点击“获取位置”后没反应，大概率是 getCurrentPosition 异步失败但没处理回调。别只写成功分支。
- 用一个
<div id="status">定位中...</div>显示实时状态，初始设为display: block -
getCurrentPosition的第二个参数（error callback）里，更新#status文本为具体错误，比如"定位被拒绝"或"超时，请重试" - 加上重试按钮：失败后显示
<button onclick="getLocation()">重试</button>，避免用户以为页面坏了
定位成功后怎么展示经纬度和地址？别硬写 UI，用 Bootstrap 排版组件
拿到 position.coords.latitude 和 position.coords.longitude 后，直接塞进 Bootstrap 的卡片和表格结构里，比手写 div + CSS 快得多。
- 用
<div class="card"><div class="card-body"> 包裹结果区域，视觉聚焦 <li>经纬度用 <code><dl class="row"></dl>布局：<dt class="col-sm-3">纬度</dt> <dd class="col-sm-9">31.2304</dd> - 地址字段如果来自逆地理编码（如调用高德/腾讯地图 API），用
<small class="text-muted"></small>显示，避免喧宾夺主 - 确保按钮有明确的
class="btn btn-primary btn-lg"，别只靠自定义 CSS - 在按钮上加
ontouchstart=""属性（空值即可），强制 iOS 激活 click 事件 - 测试真机：iOS Safari 和 Android Chrome 都要试，模拟器里的定位常返回固定坐标，容易掩盖交互问题
- 必须由用户显式操作触发，比如点击按钮或滑动开关
- 如果想“进入页面即提示”，可用
<button type="button" class="btn btn-outline-secondary">启用实时定位</button>作为引导，点击后再调用 API - 注意：部分国产安卓浏览器（如 UC、QQ 浏览器）对
navigator.geolocation支持不稳定，建议 fallback 到 IP 定位（如https://ipapi.co/json/）做粗略城市级展示
移动端点击按钮没反应？检查 touch 事件兼容性和按钮样式
很多人在 iOS 上发现 <button></button> 不触发 click，其实是 CSS 导致的：Bootstrap 的 .btn 默认有 touch-action: manipulation，但若父容器加了 overflow: hidden 或用了某些手势库，可能拦截了 touchstart。
要不要自动定位？谨慎开启，用户反感静默获取位置
页面加载完立刻执行 getCurrentPosition，多数安卓和所有 iOS 会直接拒绝，且 Chrome 已禁止非用户手势触发的定位请求。
真正麻烦的不是调用 getCurrentPosition，而是处理它返回的坐标精度差异、逆地理编码失败、不同浏览器对 error.code 的解释不一致——这些没法靠 Bootstrap 解决，得在 JS 里逐条判断 error.code === 1（PERMISSION_DENIED）还是 2（POSITION_UNAVAILABLE）。
