Bootstrap 不提供地图组件，需在 Bootstrap 页面中用原生方式加载腾讯地图 API，并通过栅格、卡片等协调布局；关键在于容器有明确宽高、避免 CSS 冲突、确保 DOM 就绪后初始化。
Bootstrap 本身不提供地图组件，也不能直接“集成”腾讯地图 SDK；你实际要做的是：在 Bootstrap 构建的页面里，用原生方式加载腾讯地图 JavaScript API，并用 Bootstrap 的栅格、卡片、响应式工具来布局和包裹地图容器。关键不是“集成”，而是“共存”与“样式协调”。
为什么不能直接用 bootstrap-map 这类插件
目前没有官方或广泛维护的 bootstrap-tencent-map 插件。网上搜到的所谓“Bootstrap 地图组件”基本是自行封装的 <div id="map"></div> + 自定义 CSS，底层仍调用腾讯地图 JS API（https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY）。强行套用 Bootstrap 类名（比如给地图容器加 class="card"）可行，但地图 Canvas 会无视 col-md-8 的 flex 布局约束，容易溢出或高度塌陷。
- 腾讯地图 SDK 初始化必须等 DOM 元素就绪且有明确宽高，否则报
container is not valid - Bootstrap 的
.container或.row默认有 padding/margin，可能挤压地图可视区域 - 移动端下，未设
height: 100vh或固定像素高度的地图容器会收缩成一条线
正确加载腾讯地图并适配 Bootstrap 布局
核心是两件事：确保容器有可计算高度 + 避免 CSS 冲突。推荐结构如下：
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-12 col-lg-8">
<div id="tencent-map" style="width: 100%; height: 500px;"></div>
</div>
<div class="col-12 col-lg-4 bg-light p-3">
<h4>门店信息</h4>
<p>广东省深圳市南山区科技园</p>
</div>
</div>
</div>
-
container-fluid和g-0消除默认间距，防止地图被挤变形 - 地图容器必须设
height（不能只靠min-height或flex: 1，腾讯地图不认 Flex 容器的高度计算） - 初始化脚本放在
