5

我正在尝试创建一个类似于 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>

较少的

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

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

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

4

1 回答 1

0

我也在试图找出最好的方法来做到这一点。这就是我所做的。也许不是最好的解决方案，但它正在工作。

我有一个两列布局，我希望左边是.affix。我将柱子拉出该行并将其放在原来的上方自己的行中。我通过添加 .offset3 将剩余的列移回原位。我将 .affix 放在列 div 而不是 ul 上。然后我将固定列包裹在一个 div 中，CSS 为 position:absolute; （即在 .row div 内部和 .col3 div 外部）这使两个 .row div 重叠，其中一个是固定的，另一个是滚动的。

于 2013-03-23T17:39:20.187 回答