禁用 Bootstrap 3 响应并将页面加载到 iframe答案

【问题标题】：Disable Bootstrap 3 responsiveness and load page to iframe禁用 Bootstrap 3 响应并将页面加载到 iframe
【发布时间】：2016-06-11 13:38:41
【问题描述】：

我想禁用 Boostrap 3.0 响应，然后在 iframe 中加载页面（发票模板）。

我的 iFrame HTML/CSS 是：

<div class="row">
    <div class="col-xs-12">
        <iframe id="frame" src="http://my.app/template/one/pdf/html" frameborder="0" scrolling="no"></iframe>
    </div>
</div>

#frame {
  max-width: 1190px;    // A4 page dimension ratio
  min-height: 1684px;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

我关注了instructions here，并且能够在 iPhone 5 模式下将页面加载到 Chrome 时禁用响应。

如果我从页眉中省略 viewport 语句，它会像这样稍微从屏幕上加载：

如果我添加一个视口语句（并将其设为 950 宽），它会像这样完美加载：

<meta content="width=950" name="viewport">

当我将它放在我的 iframe 中时，它会像这样响应：

我可以在 iframe 的页眉中看到 CSS 文件是无响应的 boostrap 版本。

我的问题是：

iframe CSS 是否被父页面的 CSS 覆盖。我预计不会，那您为什么认为模板没有在 iFrame 中以桌面模式加载？

为什么根据引导指令，如果没有元标记，它不适合视口？

什么可能导致页面底部的文本不与页面的其余部分一起缩放？

【问题讨论】：

标签： html css twitter-bootstrap iframe

【解决方案1】：

<iframe> 是独立的 - 它使用自己的 html 结构，因此它是自己的样式。

如果不了解“发票”页面的内容，就无法回答您的问题。

【讨论】：