Question

我正在尝试创建类似Twitter引导文档中的侧边栏：http://twitter.github.com/bootstrap/getting-started.html

我已经有了词缀工作，但除非你滚过数据偏移，否则栏会崩溃，因为它没有。

HTML

<div class="span3">
          <ul data-spy="affix" data-offset-top="255" class="nav nav-tabs nav-stacked docs-sidebar" id="navbar">
            <li><a href="#grid">Grid system <i class="icon-chevron-right pull-right"></i></a></li>
            <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right pull-right"></i></a></li>
            <li><a href="#layouts">Layouts <i class="icon-chevron-right pull-right"></i></a></li>
            <li><a href="#responsive">Responsive design <i class="icon-chevron-right pull-right"></i></a></li>
          </ul>
          <p></p>
       </div>

LESS

    // For Affix plugin
.affix {
  position: fixed;
  top: (@navbarHeight * 1.8) + @navbarPadding + 25px;
}

.docs-sidebar {
    width: (@gridColumnWidth * 4);
}

这使得侧边栏成为固定的span4宽度，但不会使其响应。我如何确保它具有响应性？

Answer 1

我也想弄清楚这样做的最好方法。这就是我所做的。也许不是最好的解决方案，但它正在发挥作用。

我有两列布局，我想左边的.affix。我把柱子拉出来修好了，然后把它放在原来的上面。我通过添加.offset3将剩余的列移回原位。我把.affix放在列div而不是ul上。然后我将固定列包装在一个div中，其位置为CSS：absolute; （它位于.row div内部和.col3 div之外）这使两个.row div重叠，其中一个固定而另一个固定。

当我向下滚动时，Twitter引导程序附加的侧边栏会崩溃

1 个答案: