it-swarm.com.ru

Bootstrap3: исправлена ​​навигация слева

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

http://jsbin.com/iQIKUli/3

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

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

Большое спасибо!

6
FrancescoMussi

Я бы посоветовал вам удалить внешнюю переменную container и использовать 'row', поскольку в BS 3 больше нет row-fluid.

http://bootply.com/92472

1
Zim

В текущей версии 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 .

1
Christian.D

Если я правильно понимаю, вы хотите поместить класс .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

1
hippojamba