Bootstrap 在右侧添加侧边栏答案

【问题标题】：Boostrap affix sidebar on the rightBootstrap 在右侧添加侧边栏
【发布时间】：2014-08-27 17:15:24
【问题描述】：

我已经阅读了很多关于词缀和侧边栏的问题，但要么我不太了解，要么我找不到解决问题的方法：

按照此处找到的建议，我制作了 JS 代码来动态定义偏移量（barrehaut 是我的标头的类）：

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 {
    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 px 时，如何使我的菜单消失？（就像col-md-3 没有词缀一样）

2- 有没有办法根据包装器的宽度（在我的情况下为col-md-3）动态固定词缀类的宽度，以便在固定在顶部时看不到菜单更改？我知道如何通过 JS 添加或删除类，但不知道如何更改 CSS 类的属性，这可能吗？

【问题讨论】：

标签： javascript html css twitter-bootstrap-3 affix

【解决方案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) 中使用相同的方法。

【讨论】：