Correção da navegação da barra lateral no fluid twitter bootstrap 2.0


Respostas:


168

Nota: Existe um plugin jQuery de bootstrap que faz isso e muito mais que foi introduzido algumas versões depois que esta resposta foi escrita (quase dois anos atrás) chamado Affix . Essa resposta se aplica apenas se você estiver usando o Bootstrap 2.0.4 ou inferior.


Sim, basta criar uma nova classe fixa para sua barra lateral e adicionar uma classe de deslocamento ao seu div de conteúdo para compensar a margem esquerda, assim:

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/ Edite aqui: http://jsfiddle.net/U8HGz/1/

Atualizar

Corrigido meu demo para suportar a folha de bootstrap responsivo, agora ele flui com o recurso responsivo do bootstrap.

Nota: Esta demonstração flui com a barra de navegação fixa superior, de modo que ambos os elementos se tornam position:staticno redimensionamento da tela, coloquei outra demonstração abaixo que mantém a barra lateral fixa até que a tela caia para visualização móvel.

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 , edite aqui .

observação secundária: há cerca de 10px / 1% de diferença na largura da barra lateral fixa, é devido ao fato de que, uma vez que ela não herda a largura do div do contêiner span3 porque é fixo, eu tive que chegar a um largura. Está perto o suficiente.

E aqui está outro método se você quiser manter a barra lateral fixa até que a grade caia para exibição em tela pequena / móvel.

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 , edite aqui .


Para mim, tanto no Chrome quanto no Firefox, esse violino sempre tem uma barra de rolagem horizontal (Chrome) abaixo de uma largura de ~ 1.016 pixels. (Mais fácil de ver aqui: jsfiddle.net/U8HGz/130/show que é apenas / 1, mas exibindo a largura e altura da janela abaixo de "Olá, mundo; não sei o que é / 2 - / 129.)
TJ Crowder

1
@TJCrowder que se deve à margin-left:290pxdeclaração sobre a .span-fixed-sidebarclasse feita para dar lugar à barra lateral, caso ela não existisse, o conteúdo se sobreporia à barra lateral em telas menores. Você pode eliminar a barra de rolagem horizontal no entanto, escondendo-lo explicitamente no bodytag, assim: body { overflow-x: hidden; }.
Andres Ilich

Obrigado. Isso pode funcionar com uma consulta de mídia ou algo assim (por isso está lá em janelas realmente estreitas); mas nesse ponto provavelmente desejamos realocar a barra lateral.
TJ Crowder

1
@mauris corrigiu minha demonstração para suportar o recurso responsivo do bootstrap.
Andres Ilich

1
@miguelcobain aqui é uma versão fixa , não totalmente testada, mas funcionou bem no meu ambiente de teste. Outra solução seria usar o plugin de bootstrap afixo , que traz suporte nativo para seções fixas no bootstrap .... essa solução foi escrita em um momento em que não tínhamos nenhum.
Andres Ilich

46

O Boostrap mais recente (2.1.0) tem um novo recurso JS "afixo" especificamente para este tipo de aplicativo, FYI.


@AlexanderRechsteiner Na verdade não. O OP menciona especificamente o Bootstrap 2.0.
Kyle

27

isso vai bagunçar o Webdesign responsivo. Melhor envolver a barra lateral fixa em uma consulta de mídia.

CSS

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

HTML

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

Agora, a barra lateral só é corrigida se o viewpot for maior que 768px.



0

Comecei com as respostas de Andrés e acabei obtendo uma barra lateral pegajosa como esta:

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

Estou assumindo que também preciso do JS para atualizar a variável 'sidebarwidth' quando a janela de visualização é redimensionada.


0

Muito fácil de obter fix nav ou qualquer tag que você deseja Tudo que você precisa é escrever sua tag fix assim e colocá-la na seção do corpo

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

0

Com a versão atual do Bootstrap (3.3.2), há uma boa maneira de obter uma barra lateral fixa para navegação.

Essa solução também funciona bem com a classe container-fluid reintroduzida, o que significa que é facilmente possível ter um layout de tela inteira responsivo.

Normalmente você precisaria usar larguras e margens fixas ou a navegação se sobreporia ao conteúdo, mas com a ajuda da coluna de espaço reservado vazio o conteúdo é sempre posicionado no lugar certo.

A configuração abaixo envolve o conteúdo quando você redimensiona a janela para menos de 768 px e libera a navegação fixa.

Consulte http://www.bootply.com/ePvnTy1VII para obter um exemplo prático.

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.