当屏幕调整大小低于阈值时，我的导航栏应该折叠到选择列表。它适用于我的主页，但不适用于其他页面，即除了主页之外的其他页面，当屏幕调整大小直到网站折叠时，导航栏完全消失（应该在那里的选择列表元素不存在） 。我的导航栏下面有一个子菜单，它崩溃就好了。我想知道这是什么问题？可能是脚本冲突（但崩溃是bootstrap css吧）？
我的导航栏是类导航栏，左侧是标记，
我使用jQuery和django以及bootstrap。
<!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/global.css">
-->
<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">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!--link href="/static/bootstrap/css/bootstrap-responsive.min.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">
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet"/>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<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="container-fluid"-->
<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-->
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="main">
{% block main_body %}{% endblock %}
</div>
</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>
<!--li><a href="/account/">Account</a></li-->
<!--li><a href="/util/">Admin</a></li-->
</ul>
</nav>
</div>
</div>
</div>
</section>
{%comment%}
<div class="label label-warning offset2">
<p>CoAssets Beta</p>
</div>
{%endcomment%}
{% endblock %}
答案 0 :(得分：0)
使用bootstrap 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类开发团队修复了此here，但是有许多示例代码片段，用户需要在.container内使用导航，并建议使用.navbar-inner } ...不再存在。
使用那个不存在的类会抛弃你的css，因为bootstrap从less编译css，并且该属性被分配给.navbar属性，但不是.navbar-inner，所以基本上是{{ 1}}属性不会被分配分配给您的导航栏，并且您在导航栏上没有高度，没有文本可以为元素提供计算的高度，并且只有浮动元素位于流量之外且不会t以高度计算计算。
答案 1 :(得分：-1)
我有类似的问题，但只是我为容器添加了“position：fixed”并且它有效。试试吧，也许它适合你。