文章/答案/技术大牛

发布

社区首页 >问答首页 >引导导航栏在调整屏幕大小时消失。

问引导导航栏在调整屏幕大小时消失。
EN

Stack Overflow用户

提问于 2013-05-16 13:53:04

回答 2查看 5.2K关注 0票数 1

当屏幕调整到阈值以下时，我的导航条应该折叠成一个选择列表。它适用于我的主页，但不适用于其他页面，即在主页之外的其他页面上，当屏幕调整大小直至站点崩溃时，导航栏将完全消失(本应存在的选择列表元素不存在)。我的肚脐下面有一个子菜单，它可以很好地折叠。我想知道有什么问题吗？它可能是脚本冲突(但崩溃是引导css正确的)？

我的肚脐是一个级别的肚脐，左边有一个标签的标志，

链接按钮。我使用jQuery和django以及引导。<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="">  <link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css"> <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">  <link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">  <link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css"> <link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">  <script src="/static/bootstrap/js/modernizr.custom.js"></script> <script src="/static/js/jquery-1.9.0.js"></script> <script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script> <script src="/static/bootstrap/js/jquery.scrolltotop.js"></script> <script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script> <script src="/static/highcharts-3/js/highcharts.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script src="/static/bootstrap/js/superfish.js"></script> <title>CoAssets Platform (BETA)</title> </head> <body>  <div class="row-fluid"> <div class="span12" id="topmenu"> {% block topmenu %}{% endblock %} </div> </div> <div class="row-fluid" style="background-color:#ffad37"> <div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px"> <ul class="nav nav-pills"> {% block submenu %}{% endblock %} <li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a> <li class="pull-right"><a href="/account/">Account</a></li> </ul> </div> </div>   <div class="row-fluid"> <div class="span12" id="main"> {% block main\_body %}{% endblock %} </div> </div>  </br> <div class="container-fluid" id="copyright"> <div class="row-fluid"> <div class="span4"> <p>Legalise</p> <p>Contact Us</p> </div> <div class="span4"> <p>Partners</p> <p>FAQ</p> <p>Definitions</p> </div> <div class="span4"> <p><a href="/util/">Admin</a></p> </div> </div> <div class="row-fluid" id="copyright"> <div class="span12" id="footer"> <p>Copyright of CoAssets.com © 2013</p> </div> </div> </div> <script> //script conflicts with some other jQuery scripts, so need to handle this script jQuery.noConflict(); $(document).ready(function($){ $('.nav li').each(function() { var currentPath = window.location.pathname; var thisPath = $(this).children().attr('href'); //alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath); $(this).removeClass('active'); if (thisPath == currentPath && !$(this).hasClass('active')) { $(this).addClass('active'); }; }); $('#menu li').each(function() { var currentPath = window.location.pathname; var thisPath = $(this).children().attr('href'); var len = thisPath.length; //alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath); $(this).removeClass('active'); if (thisPath != '/' && thisPath == currentPath.substring(0,len) && !$(this).hasClass('active')) { $(this).addClass('active'); } else if (thisPath=='/' && currentPath == '/') { $(this).addClass('active'); }; }); }); </script> </body> </html> {% extends "base.html" %} {% block topbar %} {% endblock %} {% block topmenu %} <section class="navbar"> <div class="navbar-inner main-menu"> <div class="row-fluid"> <div class="span2"> <a href="www.ascendantassets.com" class="logo pull-left"><img src="/public\_media/index\_01 edited4.png" alt=""></a> </div> <div class="span10"> <nav id="menu" class="pull-right" > <ul> <li class="active"><a href="/">Home<br/><span>CoAssets</span></a></li> <li><a href="/cms/view/">News</a></li> <li><a href="/portfolio/">Portfolio</a></li> <li><a href="/property/">Opportunities</a></li> <li><a href="/ipo/">New Opportunities</a></li> <li><a href="/transaction/">Transaction</a></li> <li><a href="/analytics/npv/">Research</a></li>   </ul> </nav> </div> </div> </div> </section> {%comment%} <div class="label label-warning offset2"> <p>CoAssets Beta</p> </div> {%endcomment%} {% endblock %}

django

twitter-bootstrap

fluid-layout

navbar

回答 2

Stack Overflow用户

发布于 2014-01-29 03:44:04

使用引导3.0，navbar-inner不再是一个类，在我的例子中，当遇到这个问题时，删除该类将导致正确的行为。

<nav class="navbar" role="navigation">
        <div class="container">

            <div class="navbar navbar-inverse ">
        <!-- Brand and toggle get grouped for better mobile display -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsing-nav">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

    <div class="collapse navbar-collapse" id="collapsing-nav">
    <ul class="nav navbar-nav">
      <!--   dropdown items go here -->
    </ul>
    </div>

            </div><!--/.navbar -->
            </div><!-- /.container -->
</nav>

或者，您可以将以下内容添加到样式声明中，以自我支持

.navbar-inner {
   min-height: 50px;
}

造成这个问题的原因有以下几点：

在折叠模式下没有文字出现在导航栏中(最常见的是导航条品牌项目)。
这将在布局中保留浮动元素。
从引导库中删除navbar-inner类

开发团队修复了这个这里，但是这里有很多示例代码，用户需要在.container中使用nav，并建议使用.navbar-inner.已经不存在了。

这个不存在的类的使用会抛出您的css，因为引导程序从更少的地方编译css，并且该属性被分配给.navbar属性，而不是.navbar-inner，所以min-height属性基本上不会被分配给您的导航条，并且您的导航线上没有高度，没有文本给元素一个计算的高度，只有在流之外的浮动元素在高度计算中不被计算。

票数 0

Stack Overflow用户

发布于 2013-05-29 15:00:33

我有一个类似的问题，但我只是添加了“位置:固定”的容器和它的工作。试一试，也许对你有用。

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16589341

复制

相似问题

问引导导航栏在调整屏幕大小时消失。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导导航栏在调整屏幕大小时消失。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导导航栏在调整屏幕大小时消失。
EN