Bootstrap 列未调整到 fancybox 中的小屏幕 window

Question

我有一个网站可以在 fancybox 中打开 html 文档。 html 有两个相等的列 - 所以我有两个 <div class="col-sm-6"> div。这两列在桌面上显示得非常好，iPad 纵向和横向 - 但由于某种原因它不会切换到 iphone 上的单列。它仍然在 iphone.

上显示横向和纵向两列

bootstrap 列在我的主要 html 上正常工作 - 但在 fancybox 中打开的 html 上不正常。为什么 html 不会在较小的屏幕上切换到单列的任何想法。

Fancybox 脚本

<script type = "text/javascript">
  $(function() {
    //    fancybox
    jQuery(".fancybox").fancybox({
      'type': 'iframe', // tell the script to create an iframe
    });
  });
</script>

HTML

<figure class="effect-jazz">
    <img src="hover/img/6.jpg" alt="img06"/>
        <figcaption>
            <h2>Song <span>List</span></h2>
            <p>View a comprehensive list of songs in Pauls current repertoire.</p>
            <a  class="fancybox fancybox.iframe" href="songlist.html"></a>
        </figcaption>           
</figure>

Answer 1

谢谢#Shehary。问题确实出在 iframe 上。我的主要 html 文档中的新代码：

<figure class="effect-jazz">
  <img src="hover/img/6.jpg" alt="img06" />
  <figcaption>
    <h2>Song <span>List</span></h2>
    <p>View a comprehensive list of songs in Pauls current repertoire.</p>
    <a class="fancybox" href="songlist.html"></a>
  </figcaption>
</figure>
</div>

根据 bootstrap 的指示，此花式框现在在较小的屏幕上调整为 1 列。谢谢

Bootstrap 列未调整到 fancybox 中的小屏幕 window

Bootstrap columns not adjusting to small screen in fancybox window

css

ios

twitter-bootstrap

fancybox-2

twitter-bootstrap-3