包含iframe的页面上如何使用Bootstrap 3导航栏

Question

包含iframe的页面上如何使用Bootstrap 3导航栏

javascriptcsstwitter-bootstrapiframenavbar

5

我在使用Bootstrap 3的导航栏时遇到了问题。当我在页面上添加< b>iframe 时，它不会扩展并且我无法在小屏幕上导航。然而，当窗口最大化（大屏幕）时，可以看到导航栏存在，并且所有项目都可用且可点击。

没有iframe时，一切正常。有人能想象为什么吗？这对我来说似乎相当奇怪...

我会感激任何指针。

欢呼：-）

编辑：一些代码。不要被html中的django代码片段所困扰。它们很好地工作。

编辑2：我现在也注意到，我的页脚在包含iframe的同一页上不显示。注释掉iframe后，一切正常。为什么会这样？没有人知道吗？ < b> iframe：

<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"/>                                                                                          
</div>

导航栏：

<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>

- EvilSmurf

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、具体问题或错误以及重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建一个最小、完整和可验证的示例。 - Aibrean

谢谢您的建议。我已经添加了特定的代码部分，导致问题的原因是一个 iframe。然而这个问题与此无关，关注的是 bootstrap 的导航栏定义，我也已经添加了它。再次感谢。 - EvilSmurf

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EvilSmurf · Accepted Answer

我发现了问题。

必须使用

<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>