Bootstrap3: фиксированные нав слева

Question

Я настраиваю сайт с начальной загрузкой 3 и идея состоит в том, чтобы иметь столбец слева, зарезервированные для навигации, а справа содержания сайта:

http://jsbin.com/iQIKUli/3

Позиция навигатора должна быть фиксированной и без полей слева и сверху. Я попытался с положением: фиксированным и позиционным: абсолютным, но проблема в том, что содержимое сайта переопределяет навигационную панель.

Как я могу правильно зафиксировать навигационную панель слева? Как я могу избежать того, что содержимое сайта переопределяет навигационную панель?

спасибо!

Answer 1

Я хотел бы предложить вам удалить внешний container , и использовать «ряд», поскольку в BS 3 больше нет row-fluid.

http://bootply.com/92472

Answer 2

Если я понимаю правильно, вы хотите поместить .navigation класс в новом DIV, как это:

<div class="col-xs-4 col-md-2"> 
    <div class="navigation"> 
      <h1>Navigation</h1> 
    </div> 
</div> <!-- /col-md-2 navigation --> 

И изменить position: absolute; к position: fixed; в вашем .navigation классе

Answer 3

С текущей версией Bootstrap (3.3.2) есть хороший способ добиться фиксированной боковой панели для навигации.

Это решение также хорошо работает с повторно введенным классом контейнера-жидкости, что означает, что легко получить гибкую полноэкранную компоновку.

Обычно вам необходимо использовать фиксированные ширины и поля, или навигация будет перекрывать содержимое, но с помощью пустого столбца-заполнителя содержимое всегда будет располагаться в нужном месте.

Нижеприведенная настройка обертывает содержимое при изменении размера окна до 768 пикселей и освобождает фиксированную навигацию.

См. http://www.bootply.com/ePvnTy1VII для примера.

CSS

@media (min-width: 767px) { 
    #navigation{ 
     position: fixed; 
    } 
} 

HTML

<div class="container-fluid"> 
<div class="row"> 
    <div id="navigation" class="col-lg-2 col-md-3 col-sm-3"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 1</a></li> 
    </ul> 
    </div> 

    <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs"> 
    <!-- Placeholder - keep empty --> 
    </div> 

    <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill"> 
    ... 
    Huge Content 
    ... 
    </div> 
</div> 
</div> 

Смотрите мой ответ в https://stackoverflow.com/a/28238515/3891027.