javascript - Bootstrap 贴上右边的侧边栏

Question

我看了很多关于词缀和侧边栏的问题，但要么我不太理解，要么我找不到解决问题的方法:

按照此处的建议，我编写了 JS 代码来动态定义偏移量(barrehaut 是我的 header 的类):

var y = $('.barrehaut').height();
        $('nav').affix({
            offset: {
            top: y
        }

效果不错

根据其他答案，我将导航 div 包裹在“网格上”的另一个 div 中:

<div class="col-md-3 hidden-print">
    <nav class="bs-docs-sidebar">
        <ul class="nav">
            <li class="active"><a href="#1">Environnement requis pour accéder au service EDIFLEX</a>
                <ul class="nav nav-stacked">
                    <li><a href="#1p1">Préambule</a></li>
                    <li><a href="#1p2">Connexion via internet</a></li>
                    <li><a href="#1p3">Conseils pour l'utilisation du logiciel de navigation</a></li>
                </ul>
            </li>

    </nav>
</div> 

当然，我定义了我的 Affix Classe :

.affix {
    top: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 20px;
    position: fixed;

    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

两个问题:

1- 当窗口大小小于 xx 像素时，如何让我的菜单消失？ (因为 col-md-3 没有词缀)

2- 有没有一种方法可以根据包装器的宽度动态固定词缀类的宽度(在我的例子中是 col-md-3)，以便看不到菜单变化什么时候固定在上面？我知道如何通过 JS 添加或删除类，但不知道如何更改 CSS 类的属性，这可能吗？

Answer 1

我成功了!

为了让菜单在窗口大小小于 992 像素时消失(比如 Col-md-3)，我使用了 css:

.affix {
    top: 0;
    padding-right: 15px;
    padding-left: 0px;
    margin-right: 20px;
    position: fixed;
    display: none;

  -webkit-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@media screen and (min-width:992px){
    .affix {
        display:block;
    }

为了保持良好的宽度，我使用 JS 强制导航的宽度:

 $(function(){
      var y = $('.barrehaut').height();
        var x = $('.nav').width();
        $('.nav').css({"width":x});
        $('nav').affix({
      offset: {
        top: y
      }

但我认为我可以在后来发现的 CSS (@media-screen) 中使用相同的方法。