0
我最近一直在学习响应式设计，并试图改造一个我一直在使用Bootstrap进行工作的网站，以便使其响应。然而，我遇到了一个奇怪的问题，那就是除了我的索引页面外，我的所有页面上的导航栏都几乎完全按照需要工作 - 正确呈现，并且在缩小页面宽度时显示移动版本。Bootstrap Navbar仅在一个页面上显示不正确
但是，在我的索引页面上，我最终得到了一个导航栏的合并，该导航栏似乎是应用于整个页面的移动下拉列表导航栏，即使在全屏1080p的屏幕上也是如此。在任何时候都是如此，没有我打开导航栏下拉菜单（不应显示在1080p ...）。
因此，合理的结论是，如果布局本身适用于其他任何页面，那么我的索引页中会出现一些错误。但我看不出会有什么导致了问题：
版式文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
@*<meta name="viewport" content="width=device-width, initial-scale=1.0">*@
<title>@ViewBag.Title - Hire Right</title>
@Scripts.Render("~/bundles/scripts") @* -- All jquery/bootstrap is loaded properly in this single bundle -- *@
@Styles.Render("~/Content/css")
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationLinks" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="/">HireRight</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationLinks">
<ul class="nav navbar-nav navbar-left">
<li class="nav navbar-nav navbar-left">@Html.ActionLink("New Clients", "NewClients", "Client")</li>
<li class="nav navbar-nav navbar-left">@Html.ActionLink("Returning Clients", "Order", "Order")</li>
<li class="nav navbar-nav navbar-left">@Html.ActionLink("Get in Touch", "Contact", "Contact")</li>
<li class="nav navbar-nav navbar-left">@Html.ActionLink("Order", "Order", "Order")</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="body-content" style="padding-left: 15px; margin-top: 25px;">
@RenderBody()
<hr />
<footer style="height: 20px; clear: both;">
<p>© @DateTime.Now.Year - Hire Right Consultants</p>
</footer>
</div>
@RenderSection("scripts", required: false)
</body>
</html>
/Home/Index.cshtml：
@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/indexDivScripts.js"></script>
<style>
.titleRow {
border: 2px dotted red;
margin: 5px;
padding: 5px;
}
</style>
<div class="container-fluid">
<div class="row titleRow" style="width: 100%; text-align: center; clear: both;">
<ol class="list-item-no-bullet">
<li class="btn btn-default" style="width: 25%;" onclick="displayInfoDiv('WhyUseHireRight');">Why Use Hire Right?</li>
<li class="btn btn-default" style="width: 25%;" onclick="displayInfoDiv('Consultants');">Consultants</li>
<li class="btn btn-default" style="width: 25%;" onclick="displayInfoDiv('WhoWeServe');">Occupational Categories</li>
</ol>
</div>
<div style="width: 100%; background-color: #993333; padding: 10px 10px 10px 30px;" class="row">
<!-- This was originally a Jumbotron, but it seemed to be causing its own
set of issues so I styled it as a simple div with a hardcoded background color -->
<div style="width: 35%; float: left;">
<h1>Hire Right Testing</h1>
<h3 style="padding-left: 60px;"><i>Hire Right, the First Time</i></h3>
</div>
<div class="row titleRow" style="float: left; width: 40%;">
<h4>content</h4>
</div>
</div>
<div id="infoDiv" hidden="hidden">
</div>
<div id="introDiv" class="row titleRow" style="width: 100%;">
<div class="col-xs-12 col-md-6 col-md-push-3" style="border: 2px dotted red;">
<p>
content
</p>
<p>
content
</p>
<img src="~/Content/indexPicture.jpg" alt="indexImage" />
</div>
<div class="col-xs-6 col-md-3 col-md-pull-6" style="border: 2px dotted red;">
<p>content</p>
</div>
<div class="col-xs-6 col-md-3" style="border: 2px dotted red;">
<p>content</p>
</div>
</div>
<div id="WhoWeServe" hidden="hidden">
@{ Html.RenderPartial("WhoWeServePartial"); }
</div>
<div id="Consultants" hidden="hidden">
@{ Html.RenderPartial("ConsultantsInformationPartial");}
</div>
<div id="WhyUseHireRight" hidden="hidden">
@{ Html.RenderPartial("WhyUseHireRightPartial");}
</div>
</div>
我有一些SASS文件，我正在同尽管我无法想象他们会有关系吗？除了使用他们网站的总体设计，我曾尝试重新着色的导航栏，它的工作，虽然链接再显色是因某些原因无法使用代码是这样的：
.navbar {
background-color: $darkRed;
a { color: $black; }
a:hover { color: $ltgray; }
}
这里描绘问题的图像。两个图像都是该是被人下载，而任何东西被点击屏幕，和一个完整的1080p的浏览器窗口： http://tinypic.com/r/2h2i3pv/9