具有流畅布局的Bootstrap Affix插件

时间:2012-09-21 18:41:16

标签: twitter-bootstrap fluid-layout

如果我想在流体布局中使用侧边栏的附加插件,但侧边栏的宽度在粘贴时总是会改变,而响应式设计也不起作用。

在Bootstrap文档中,affix插件不与流体布局一起使用。 也许是因为他们有同样的问题。

有人知道如何让它发挥作用吗?

4 个答案:

答案 0 :(得分:25)

对于使用流畅的span3侧边栏进行修补,您需要添加一些javascript来限制宽度并管理调整大小。

我刚刚编写了一个小的javascript函数来完成这项工作。

从bootstrap中查看this bug

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

    resizeFn();
    $(window).resize(resizeFn);
});

答案 1 :(得分:4)

他们网站上的附加演示是响应式的,它按照预期将自己置于页面顶部。移动设备和较小屏幕上的position:fixed CSS属性不是一个可行的选项,因此功能将被删除。

答案 2 :(得分:1)

您必须明确设置侧边栏的宽度属性(或最小宽度)。如果你看一下Andres所指的页面,那么“bs-docs-sidenav”这个类的显式宽度为228px。

这会覆盖“.span3”类并阻止侧边栏在滚动时调整大小。

如果删除明确的宽度声明并滚动页面,侧边栏会调整大小,就像您在自己的页面中看到的问题一样。

答案 3 :(得分:1)

$(document).ready(function () {
  setTimeout(function () {
    $('.sidebar > *').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});

您的网页如下:

<div class="span2 navper">
  <ul class="nav nav-tabs nav-stacked" data-spy="affix">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
  </ul>
</div>