嵌入式引导 div 在非引导站点中没有响应答案

【问题标题】：Embedded bootstrap div not responsive in un bootstrap sites嵌入式引导 div 在非引导站点中没有响应
【发布时间】：2025-12-31 17:10:02
【问题描述】：

我的要求是在少数现有网站中嵌入引导样式的 div。现有网站可能有引导或没有引导实现。

典型的html结构如下，

<!--Existing site html-->
<!DOCTYPE html>
<html>
<head>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <here thier styles and scripts>
</head>
<body>

   <Existing site body>

    <!--My embedded div below-->
   <div class="my-embedded-div">
    <here my bootstrap prefixed style sheet(Ex:[.my-embedded-div allbootstrap styles])>
    <all my divs , modals and components>
   </div>

</body>
</html>

下面的问题，

我正在将我的 div 插入现有的引导站点（现有站点有自己的引导版本实现）。在这种情况下，我的嵌入 div 中的元素在所有设备中都是响应式的。这种情况很好。
但是当我使用非引导站点（没有引导实现的现有站点）实施时。我的嵌入 div 根本没有响应。如下图，

即使我有元 name="viewport" content="width=device-width, initial-scale=1.0 仍然没有响应。

我该如何解决这个案子？

注意：我只是通过向我的父元素添加前缀并为我的引导插件添加前缀来处理冲突引导（参考link）。我正在使用 bootstrap 4.1.3，我也不是 html 设计专家。

【问题讨论】：

我不确定我是否理解你的问题。如果您只想使用引导程序并使其具有响应性。为什么不把bootstrap的CDN组件链接加到head里呢？检查这个getbootstrap.com/docs/4.3/getting-started/introduction
引导网格系统正常工作有几个要求。使用您展示的绝对通用的“示例”，我们无法判断这些是否已实现。请提供一个适当的示例，实际显示您正在使用哪些 BS 组件，以及如何/在哪种情况下使用。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

尽管您没有在示例中显示实际代码，但无法在 HTML 文档的正文中导入或定义 CSS 样式。您应该将它托管在某个地方，并使用 JavaScript 在文档的 head 中注入它。

如果您无法在服务器中托管样式，则始终可以内联注入它们，也可以使用 JavaScript。

【讨论】：