5

当我使用 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;
}
4

2 回答 2

8

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

您应该仅affix在屏幕宽度大于 992 像素（Bootstrapcol-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-*。

于 2014-01-09T19:26:31.073 回答
0

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

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

为此，您需要做的就是给您的专栏并附上一个 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();
});

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

于 2019-02-21T18:31:30.707 回答