Bootstrap 3 navbar在包含iframe的网页上 [英] Bootstrap 3 navbar on pages containing iframes

问题描述

我在导航栏上遇到了一个问题。当在页面上添加 iframe 时，它不会展开，我无法导航（在小屏幕上）。

如果没有iframe，一切都会按预期工作，这样就会显示最大化窗口（大屏幕），导航栏在那里，所有项目都可用。谁能想象，为什么？这对我来说似乎很奇怪...

我会感谢任何指针。

编辑：部分代码。不要混淆的html中的django代码fragements。他们工作正常。

Edit2：我也注意到，我的页脚不显示在包含iframe的同一页面上。注释iframe和一切工作。为什么会这样？

     < div class =col-md-4> 
< iframe frameBorder =0，width =100％，height =500，id = generic src =generic_order.html/> 
< / div> 
   
 
 
 
  navbar： 
 < nav class =navbar navbar-inverse navbar-fixed-toprole =navigation> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-ex1-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =index.html> Camerata Serena< / a> 
< / div> 
 
<！ - 收集导航链接，表单和其他内容toggling  - > 
< div class =collapse navbar-collapse navbar-ex1-collapse> 
< ul class =nav navbar-nav navbar-right> 
 {％for page of page_list％} 
 {％if page.titel！='Kasse'％} 
< li>< a href =generic_page.html？index = { {page.page_index}}> {{page.titel}}< / a>< / li> 
 {％endif％} 
 {％endfor％} 
< li>< a href =admin />实习生< / a>< / li> 
< / ul> 
< / div> 
<！ -  /.navbar-collapse  - > 
< / div> 
<！ -  /.container  - > 
< / nav> 
  
 
 
解决方案
我发现了问题。
 
 
 
必须使用
 < div class =col-md-4> ; 
< iframe frameBorder =0，width =100％，height =500，id = generic src =generic_order.html>< / iframe> 
< / div> 
  
仅使用
是不够的
 < div class =col-md-4> 
< iframe frameBorder =0，width =100％，height =500，id = generic src =generic_order.html/> 
< / div> 
  
 
I have an issue with my navbar on bootstrap 3. When adding an iframe onto the page it won't expand and I cannot navigate (on small screens). Maximizing the window (big screens) however shows, that the navbar is there and all items are available and clickable.

Without the iframe, everything works as expected. Can anyone imagine, why? This seems rather strange to me...

I'd appreciate any pointers.

Cheers :-)

Edit: Some code. Don't get confused by the django code fragements inside the html. They are working fine.

Edit2: I also noticed now my footer isn't showing on that same page containing the iframe. commenting out the iframe and everything works. Why would that be? Noone?

iframe:
<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"/>                                                                                          
</div>
navbar:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Camerata Serena</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                {% for page in page_list %}
                    {% if page.titel != 'Kasse' %}
                        <li><a href="generic_page.html?index={{ page.page_index }}">{{ page.titel }}</a></li>
                    {% endif %}
                {% endfor %} 
                <li><a href="admin/">Intern</a></li>                    
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

解决方案
I found the issue.

One has to use
<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"></iframe>                                                                                          
</div>
with the complete closing statement. It's not enough to use
<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"/>                                                                                          
</div>


                        
这篇关于Bootstrap 3 navbar在包含iframe的网页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！