Naprawiono nawigację na pasku bocznym w Fluid Twitter Bootstrap 2.0

Odpowiedzi:

168

Uwaga: Istnieje wtyczka bootstrap jQuery, która robi to i wiele więcej, która została wprowadzona kilka wersji po napisaniu tej odpowiedzi (prawie dwa lata temu) o nazwie Affix . Ta odpowiedź ma zastosowanie tylko w przypadku korzystania z Bootstrap 2.0.4 lub starszego.


Tak, po prostu utwórz nową stałą klasę dla paska bocznego i dodaj klasę przesunięcia do elementu div zawartości, aby uzupełnić lewy margines, na przykład:

CSS

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

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

Demo: http://jsfiddle.net/U8HGz/1/show/ Edytuj tutaj: http://jsfiddle.net/U8HGz/1/

Aktualizacja

Naprawiono moje demo do obsługi responsywnego arkusza bootstrap, teraz przepływa z responsywną funkcją bootstrap.

Uwaga: To demo płynie z górnym stałym paskiem nawigacyjnym, więc oba elementy stają się position:staticpo zmianie rozmiaru ekranu, umieściłem poniżej kolejne demo, które utrzymuje stały pasek boczny, dopóki ekran nie spadnie dla widoku mobilnego.

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-->

Demo , edytuj tutaj .

drobna uwaga: istnieje około 10px / 1% różnicy w szerokości stałego paska bocznego, jest to spowodowane faktem, że ponieważ nie dziedziczy on szerokości z elementu div kontenera span3, ponieważ jest ustalony, musiałem wymyślić szerokość. Jest wystarczająco blisko.

A oto inna metoda, jeśli chcesz zachować pasek boczny, dopóki siatka nie spadnie dla małego ekranu / widoku mobilnego.

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;
    }
}

Demo , edytuj tutaj .

Andres Ilich
źródło
Dla mnie zarówno w przeglądarce Chrome, jak i Firefox, to skrzypce zawsze mają poziomy pasek przewijania (Chrome) poniżej szerokości ~ 1016 pikseli. (Łatwiej zobaczyć tutaj: jsfiddle.net/U8HGz/130/show, które jest po prostu / 1, ale wyświetla szerokość i wysokość okna poniżej „Hello World; Nie wiem, jakie są / 2 - / 129.)
TJ Crowder
1
@TJCrowder, co wynika z margin-left:290pxdeklaracji .span-fixed-sidebarklasy utworzonej, aby zrobić miejsce dla paska bocznego, gdyby go tam nie było, zawartość nakładałaby się na pasek boczny na mniejszych ekranach. Można wyeliminować poziomego paska przewijania choć jawnie ukrywając go na bodytagu, tak: body { overflow-x: hidden; }.
Andres Ilich
Dzięki. To może zadziałać z zapytaniem o media lub czymś podobnym (więc jest tam w naprawdę wąskich oknach); ale w tym momencie prawdopodobnie i tak chce się przenieść pasek boczny.
TJ Crowder
1
@mauris naprawił moje demo, aby wspierać responsywną funkcję bootstrapa.
Andres Ilich
1
@miguelcobain tutaj to poprawiona wersja , choć nie w pełni przetestowana, ale działała dobrze w moim środowisku testowym. Innym rozwiązaniem byłoby użycie wtyczki affix bootstrap, która zapewnia natywne wsparcie dla stałych sekcji w bootstrapie ... to rozwiązanie zostało napisane w czasach, gdy nie mieliśmy żadnego.
Andres Ilich,
46

Najnowszy Boostrap (2.1.0) ma nową funkcję „afiksu” JS, specjalnie dla tego typu aplikacji, FYI.

Joyrex
źródło
@AlexanderRechsteiner Niezupełnie. OP wyraźnie wspomina o Bootstrap 2.0.
Kyle
27

spieprzy to responsywny Webdesign. Lepiej zawiń stały pasek boczny zapytaniem o media.

CSS

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

HTML

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

Teraz pasek boczny jest naprawiony tylko wtedy, gdy widok jest większy niż 768 pikseli.

HaNdTriX
źródło
1

Nie jest to możliwe bez javascript. Uważam, że afiks.js jest zbyt złożony, więc wolę używać:

stickyfloat

Zuhaib Ali
źródło
0

Zacząłem od odpowiedzi Andresa, a skończyłem na lepszym pasku bocznym, takim jak ten:

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);

Zakładam, że potrzebuję również JS do aktualizacji zmiennej „sidebarwidth”, gdy rozmiar widoku zostanie zmieniony.

mdashx
źródło
0

Bardzo łatwo jest uzyskać poprawioną nawigację lub dowolny tag. Wszystko, czego potrzebujesz, to napisać swój znacznik poprawki w ten sposób i umieścić go w sekcji body

   <div style="position: fixed">
       test - try  scroll again. 
   </div>
verdier
źródło
0

W obecnej wersji Bootstrap (3.3.2) istnieje dobry sposób na uzyskanie stałego paska bocznego do nawigacji.

To rozwiązanie działa również dobrze z ponownie wprowadzoną klasą container-fluid, co oznacza, że ​​łatwo jest uzyskać responsywny układ pełnoekranowy.

Zwykle należałoby użyć stałych szerokości i marginesów lub nawigacja nakładałaby się na zawartość, ale za pomocą pustej kolumny zastępczej treść jest zawsze umieszczana we właściwym miejscu.

Poniższa konfiguracja zawija zawartość po zmianie rozmiaru okna do mniej niż 768px i zwalnia stałą nawigację.

Zobacz http://www.bootply.com/ePvnTy1VII, aby zapoznać się z działającym przykładem.

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.
źródło