0
最近レスポンシブデザインについて学習していて、レスポンシブにするためにブートストラップで作業していたサイトを改造しようとしています。しかし、私のインデックスページ以外のすべてのページでは、navbarは（ほとんど）望みどおりに動作します。レンダリングが正しく行われ、ページの幅を縮小するとモバイルバージョンが表示されるという奇妙な問題が発生しています。Bootstrap Navbarが1ページだけで正しく表示されない
しかし、インデックスページでは、完全な1080pの画面サイズであっても、ページ全体に適用されるモバイルのドロップダウンリストのナビゲーションバーのように見える、ナビゲーションバーの一部が合併してしまいます。これは、私がnavbarのドロップダウンを開かずに（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ファイルがあるが、私は問題を引き起こしてしまうものを見ることができません私は彼らが関係するだろうと想像することはできませんが、同様に？リンクのrecoloringは、このようなコードで、いくつかの理由のために働いていないが、サイトの一般的な設計のためにそれらを使用することに加えて、私は、働いていたナビゲーションバーを、色を変更してみました：
ここ.navbar {
background-color: $darkRed;
a { color: $black; }
a:hover { color: $ltgray; }
}
があります問題を描写した画像。両方の画像は、単にクリックされ何もせずにロードされていた画面、および1080pのフルブラウザウィンドウからであった：私はすべてをめちゃくちゃにされたものを考え出し http://tinypic.com/r/2h2i3pv/9