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