Question

我最近一直在学习响应式设计，并且正在尝试改造我一直在使用Bootstrap工作的网站，以使其具有响应性。我有一个奇怪的问题，但是在我的所有页面上除了我的索引页面之外，导航栏（几乎）完全按照需要工作 - 它正确呈现，并且当我缩小页面宽度时显示移动版本。

然而，在我的索引页面上，我最终得到了一个导航栏的合并，这似乎是应用于整个页面的移动下拉列表导航栏，即使在完整的1080p屏幕尺寸下也是如此。在任何时候都是这种情况，没有我打开导航栏下拉列表（不应该以1080p显示......）。

因此，合乎逻辑的结论是，如果布局本身适用于每个其他页面，我的索引页面会出现一些错误。但我看不出会导致这个问题：

布局文件：

@{
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>

/Home/Index.cshtml：

.navbar {
    background-color: $darkRed;
    a { color: $black; }
    a:hover { color: $ltgray; }
}

我有一些我正在使用的SASS文件，虽然我无法想象它们是否相关？除了将它们用于网站的一般设计之外，我确实尝试重新着色导航栏，虽然有效，但是由于某些原因重新链接链接不能用这样的代码：

{{1}}

这是描述问题的图像。这两张图片来自一个简单加载的屏幕，没有任何被点击的内容，以及一个完整的1080p浏览器窗口： http://tinypic.com/r/2h2i3pv/9

Answer 1

我弄清楚是什么搞乱了一切，我的一个部分视图有一个样式段，将列表项的宽度设置为100％。

Bootstrap Navbar仅在一个页面上显示不正确

1 个答案: