Boostrap наклеить боковую панель справа

Question

Я прочитал много вопросов о аффиксе и боковых панелях, но либо я не очень хорошо понимаю, или я не могу найти решение моей проблемы:

Следуя совет нашли здесь, я сделал код 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 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- Как мне сделать меню исчезнет, ​​когда размер окна меньше хх пикс? (как col-md-3 без аффикса)

2 Есть ли способ динамически фиксировать ширину класса аффикса в соответствии с шириной обертки (col-md-3 в моем случае), чтобы не видеть изменение меню, когда исправлено сверху? Я знаю, как добавлять или удалять классы через JS, но не как изменить атрибут класса CSS, возможно ли это?

Answer 1

Мне это удается!

Чтобы сделать меню исчезнет, ​​когда размер окна меньше, чем 992 точек (например, Col-мкр-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 (@ медиа-экран), который я обнаружил позже.