<body> 在我将样式放入 Bootstrap nav { position:fixed } 时下降答案

【问题标题】：<body> goes down as I put style to Bootstrap nav { position:fixed }<body> 在我将样式放入 Bootstrap nav { position:fixed } 时下降
【发布时间】：2015-01-24 08:58:32
【问题描述】：

我正在使用 Bootstrap Scrollspy。我在页面左侧添加了一个 Bootstrap nav (class= "nav nav-pills nav-stackedon") 并位于右侧。第一个问题是导航在我向下滚动时变得不可见，因此我为其添加了样式：

.my-navbar {
position:fixed;
}

然后导航栏一切正常（它固定在顶部），但问题是身体现在在导航栏下方而不是在它的右侧。为什么会这样以及如何纠正？

我的观点在这里：

@model Questionnaire.Domain.Models.StudentVM
@using System.Linq
@using System.Collections.Generic
@{
    ViewBag.Title = "Student";
}

@{
    List<String> subjectNames = new List<String>();
    for (int i = 0; i < Model.Subjects.Count; i++)
    {
        subjectNames.Add(Model.Subjects[i].Name);
    }
}
<body data-spy="scroll" data-target=".my-navbar">
    <div class="row panel">
        <div class="my-navbar col-xs-2">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation"><a href="#opsta">Opšta pitanja</a></li>
                @for (int i = 1; i < subjectNames.Count; i++)
                {
                    <li role="presentation"><a href="#" onclick="onClickHandle(@subjectNames[i])">@subjectNames[i]</a></li>
                }
            </ul>
        </div>
        <div class="col-xs-8">
            @using (Html.BeginForm())
            {
                <span id="opsta"></span>
                for (int i = 0; i < Model.Subjects.Count; i++)
                {
                    <div class="well well-outside">
                        @Html.HiddenFor(m => m.Subjects[i].ID)
                        <h3>@Html.DisplayFor(m => m.Subjects[i].Name)</h3>
                        @for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
                        {
                            <div class="well well-inside">
                                @Html.HiddenFor(m => m.Subjects[i].Questions[j].ID)
                                <h3>@Html.DisplayFor(m => m.Subjects[i].Questions[j].Text)</h3>
                                @foreach (var answer in Model.Subjects[i].Questions[j].PossibleAnswers)
                                {
                                    <div>
                                        @Html.RadioButtonFor(m => m.Subjects[i].Questions[j].SelectedAnswer, answer.ID, new { id = answer.ID })
                                        <label for="@answer.ID">@answer.Text</label>
                                    </div>
                                }
                                @Html.ValidationMessageFor(m => m.Subjects[i].Questions[j].SelectedAnswer)
                            </div>
                        }
                    </div>
                }
                <input type="submit" class="btn btn-success" value="Confirm" />
            }
        </div>
    </div>
</body>

【问题讨论】：

正文在导航栏下方，因为您已将样式设置为固定。如果没有看到所有的样式依赖关系，很难解决这个问题。但尝试删除位置固定并说浮动：左;
float:left 不会让它在滚动时停留在页面上:(
设置 position:fixed 会从页面的常规流程中删除导航栏，因此页面的行为就像没有任何东西可以代替它一样。您可以设置页面其余部分的样式，使其表现得就像它在那里一样（边距、填充、其他），或者在其位置放置一个尺寸相似的空容器，只是没有内容。
@lemieuxster，是的，我在正文中添加了 margin-left。谢谢你。如果你愿意，你可以回答这个问题。

标签： html css asp.net-mvc

【解决方案1】：

设置position:fixed 会从页面的常规流程中删除导航栏，因此页面的行为就像没有任何东西可以代替它一样。您可以设置页面其余部分的样式，使其表现得就像它在那里一样（边距、填充、其他），或者在其位置放置一个尺寸相似的空容器，只是没有内容。

【讨论】：