我最近一直在学习响应式设计，并且正在尝试对我一直在与Bootstrap合作的网站进行改造，以使其成为响应式的。但是，我遇到了一个奇怪的问题，除了索引页面之外，所有页面上的导航栏都（几乎）完全按要求工作-呈现正确，当我缩小页面宽度时，它会显示移动版本。
但是，在我的“索引”页面上，我最终合并了导航栏，这似乎是在整个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
我弄清楚是什么使所有事情搞砸了，我的部分视图中有一个样式段，该样式段将列表项的宽度设置为100％。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句