Question

当我使用affix for bootstrap 3并调整窗口大小时，我遇到了重叠侧边栏的问题。有没有办法添加一些CSS类，以便不是重叠列，菜单粘贴到顶部？

此列也与页脚重叠。任何帮助将不胜感激。似乎很多人都有同样的问题。

这是HTML：

<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>

这是CSS：

#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

Answer 1

演示：http://bootply.com/104634

当屏幕宽度大于992像素（Bootstrap affix开始垂直堆叠的断点）时，您应该只应用col-md-*。

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

此外，如果您想在较小的宽度上使用affix，可以将列更改为col-sm-*或col-xs-*。

Answer 2

我希望词缀在调整列大小时能够响应，因此我想出了一个非常简单的解决方案。

我们要做的是将词缀的宽度与调整网格大小时所在列的宽度匹配。

要执行此操作，您需要做的是给您的列加上一个ID。（或者以某种方式用javascript引用元素）

我去寻求JavaScript解决方案。

function fixAffix() {
    try {

        // Bootstrap affix will overflow columns 
        // We'll fix this by matching our affix width to our affixed column width
        var bb = document.getElementById('affixColumn').getBoundingClientRect(),
            columnWidth = bb.right - bb.left;

        // Make sure affix is not past this width.
        var affixElm = document.getElementById('affixDiv');
        affixElm.style.width = (columnWidth - 30) + "px";

        // We can also define the breakpoint we want to stop applying affix pretty easily
        if (document.documentElement.clientWidth < 975) 
            affixElm.className = "";
        else
            affixElm.className = "affix";

    }
    catch (err) {
        alert(err);
    }
}



$(window).resize(function () {
       fixAffix();
   });

$(document).ready(function () {
    fixAffix();
});

我已经包含了删除指定断点后缀的代码。这是我的应用程序特有的，但是您很可能也想做类似的事情以在较小的设备上停止词缀。

当窗口调整大小时，Twitter-bootstrap 3附加了侧边栏重叠内容，也是页脚

2 个答案: