4

Estou querendo fazer meu site da seguinte maneira com o Bootstrap

inserir a descrição da imagem aqui

Ja tentei de todas as maneiras possíveis fazer para que ele fique legal responsivo e não consegui!

Alguém pode me da uma luz de como fazer essa estrutura do layout?

no responsivo eu gostaria que ficasse assim:

inserir a descrição da imagem aqui

2
  • Ja tentou colocar um 'position:fixed' na div sidebar ? Commented 4/03/2015 às 16:10
  • Na documentação oficial têm alguns exemplos similares ao que você quer, já tentou da uma olhada nesse?: getbootstrap.com/examples/dashboard
    – dHEKU
    Commented 12/03/2015 às 15:01

1 Resposta 1

1

Bom, como você não postou nenhum código e comentou estar utilizando Bootstrap, vou passar algumas referências do próprio site deles. O próprio Bootstrap possui esse sua resposta, que seria o uso do 'Affix'.

Ele cria um elemento e faz com que ele seja fixado após um determinado scroll. Toda a documentação você pode acompanhar neste link: http://getbootstrap.com/javascript/#affix

Além do css você também vai precisar do pacote javascript do bootstrap, que pode ser customizado na área de download: http://getbootstrap.com/customize/

Para a questão de responsive, vai muito do layout que você possui. Geralmente em mobile, não se usa isso, pois fica feio, apertado, poluído. É melhor que você remova essa opção em mobile. O próprio bootstrap possui isso, com 'hidden-xs' ou 'hidden-md', leia mais aqui: http://getbootstrap.com/css/#responsive-utilities

Ou como o seu exemplo, se o header for essa sidebar fixa, basta você utilizar um css para deixar ele fixado. Exemplo: 'position:fixed; top:0;' ou um próprio feature do CSS para essa opção: http://getbootstrap.com/components/#navbar-fixed-top

Qualquer dúvida que você tenha, referente ao Bootstrap, dê uma olhada no site deles, existe uma documentação muito completa e com muitas opções.

Espero ter ajudado

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .