Question

这是我第一次使用Bootstrap。当用户移过小顶部时，左侧col-sm-3导航从affix-top更改为affix之前，我的col-sm-9列顶部始终存在较大差距横幅。

我认为我使用添加的css和js创建了这个奇怪的问题所有功能。当顶部横幅移出屏幕时（当用户向下移动页面时），该页面还有一个顶部导航栏固定在顶部。最后，左侧导航栏中有一个滚动间谍。

我有Bootstrap 3.2.0版。 你可以see the code and the problem in this jsfiddle。

<div class="container">
  <div class="row">

    <div class="col-sm-3" id="leftsidenav">
      <ul class="nav nav-stacked">
        ... <!-- this left-side nav is affixed and has scroll-spy -->
      </ul>
    </div>

    <div class="col-sm-9" id="rightcontent">
      This is the section that has a gap on top!
    </div>
  ...

无论我尝试了什么，我都无法摆脱我的col-sm-9之上的空白。任何人都可以帮助我吗？

更新

根据您的初步回复，请注意，即使用户向下滚动，我仍希望将leftsidenav保留在左侧，将右侧内容保持在右侧。我放入边距和宽度的原因是为了防止leftsidenav在向下滚动后完全被右边的内容覆盖。

基本上，你必须检查向下滚动。这是 jsfiddle with my margin setting and gap problem 。然后与 jsfiddle without the margin setting but has the covering problem 进行比较。

Answer 1

从右侧内容div中删除margin-left，并为左右内容添加float属性，如下所示。

#leftsidenav {
width:180px;
float:left
}
#rightcontent {
background-color: orange;
float:left;
}

DEMO

Answer 2

您的css存在一些干扰布局的问题。

Working Fiddle

这包括以下更新。

从内容/导航div中删除了宽度和边距：

#leftsidenav {
    /*width:180px;  <-- deleted */
}

#rightcontent {
    background-color: orange;
    /*margin-left: 200px; <-- deleted */
}

您正在使用引导列来定义布局，因此通过添加宽度，您将覆盖默认布局。

在内容div中添加了类，以帮助它们在不同大小的窗口中呈现：

<div class="col-sm-3 col-xs-3 col-lg-3" id="leftsidenav">

<div class="col-sm-9 col-xs-9 col-lg-9" id="rightcontent">

这些类旨在添加到容器中，以告诉他们在窗口显示时如何呈现它们：lg - 大，sm - 小，xs - 额外小。因此，这定义了您希望左侧导航栏的宽度为3列（25％），内容宽度为9列（75％）。

当左侧导航栏是附加顶部时，如何消除右列顶部的间隙？

2 个答案:

Working Fiddle