Исправлена ​​навигация по боковой панели в Fluid twitter bootstrap 2.0

Ответы:

168

Примечание. Существует плагин начальной загрузки jQuery, который делает это и многое другое, который был представлен через несколько версий после написания этого ответа (почти два года назад) под названием Affix . Этот ответ применим только в том случае, если вы используете Bootstrap 2.0.4 или ниже.


Да, просто создайте новый фиксированный класс для боковой панели и добавьте класс смещения в свой div содержимого, чтобы компенсировать левое поле, например:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Демо: http://jsfiddle.net/U8HGz/1/show/ Редактировать здесь: http://jsfiddle.net/U8HGz/1/

Обновить

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

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

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Демо , редактировать здесь .

небольшое примечание: разница в ширине фиксированной боковой панели составляет около 10 пикселей / 1%, это связано с тем, что, поскольку она не наследует ширину от div контейнера span3, потому что она фиксированная, мне пришлось придумать ширина. Достаточно близко.

А вот еще один метод, если вы хотите, чтобы боковая панель оставалась фиксированной, пока сетка не упадет для небольшого экрана / мобильного просмотра.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Демо , редактировать здесь .

Андрес Ильич
источник
Для меня как в Chrome, так и в Firefox эта скрипка всегда имеет горизонтальную полосу прокрутки (Chrome) шириной ниже ~ 1016 пикселей. (Легче увидеть здесь: jsfiddle.net/U8HGz/130/show, который равен / 1, но отображает ширину и высоту окна ниже «Hello World; я не знаю, что такое / 2 - / 129.)
TJ Crowder
1
@TJCrowder, который связан с margin-left:290pxобъявлением в .span-fixed-sidebarклассе, сделанным, чтобы освободить место для боковой панели, если бы его там не было, контент перекрывал бы боковую панель на меньших экранах. Вы можете устранить горизонтальную полосу прокрутки , хотя, явно скрывая его на bodyтег, например: body { overflow-x: hidden; }.
Андрес Ильич
Спасибо. Это может сработать с медиа-запросом или чем-то подобным (так что он есть в очень узких окнах); но в этот момент кто-то, вероятно, все равно захочет переместить боковую панель.
TJ Crowder
1
@mauris исправил мою демонстрацию, поддерживая отзывчивую функцию начальной загрузки.
Андрес Ильич
1
@miguelcobain - это фиксированная версия , не полностью протестированная, но отлично работающая в моей тестовой среде. Другое решение - использовать плагин affix bootstrap, который обеспечивает встроенную поддержку фиксированных разделов в начальной загрузке ... это решение было написано в то время, когда у нас их не было.
Андрес Ильич
46

В последней версии Boostrap (2.1.0) есть новая функция JS «аффикса», специально предназначенная для этого типа приложений, FYI.

Joyrex
источник
@AlexanderRechsteiner Не совсем. OP специально упоминает Bootstrap 2.0.
Кайл
27

это испортит отзывчивый веб-дизайн. Лучше оберните фиксированную боковую панель в медиа-запрос.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Теперь боковая панель исправлена ​​только в том случае, если область просмотра больше 768 пикселей.

HaNdTriX
источник
1

Это невозможно без javascript. Я считаю affix.js слишком сложным, поэтому я предпочитаю использовать:

липкий поплавок

Зухаиб Али
источник
0

Я начал с ответов Андреса и в итоге получил вот такую ​​липкую боковую панель:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS:

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

Я предполагаю, что мне также нужен JS для обновления переменной 'sidebarwidth' при изменении размера области просмотра.

mdashx
источник
0

Очень легко получить исправление навигации или все, что вы хотите. Все, что вам нужно, это написать свой тег исправления таким образом и поместить его в раздел тела

   <div style="position: fixed">
       test - try  scroll again. 
   </div>
зелень
источник
0

Текущая версия Bootstrap (3.3.2) позволяет получить фиксированную боковую панель для навигации.

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

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

Приведенная ниже настройка обертывает содержимое, когда вы изменяете размер окна до менее 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>
Christian.D
источник