<body> 下降，因为我将样式设置为 Bootstrap nav { position:fixed }

Question

我正在使用 Bootstrap Scrollspy。我在页面左侧添加了一个 Bootstrap 导航 (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>

Answer 1

设置 position:fixed 从页面的常规流程中删除导航栏，因此页面就像什么都没有一样。您可以设置页面其余部分的样式，使其看起来就好像它在那里一样（边距、填充、其他），或者在其位置放置一个具有相似尺寸但没有内容的空容器。

<body> 下降，因为我将样式设置为 Bootstrap nav { position:fixed }

<body> goes down as I put style to Bootstrap nav { position:fixed }

html

css

asp.net-mvc