我正在使用 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>
最佳答案
设置position:fixed 将导航栏从页面的常规流程中移除，因此页面就像什么都没有一样。您可以设置页面其余部分的样式，使其看起来就好像它在那里一样(边距、填充、其他)，或者在其位置放置一个尺寸相似但没有内容的空容器。
关于html - <body> 在我将样式添加到 Bootstrap nav { position :fixed } 时下降，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28120425/