Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tenho um site que estou fazendo utilizando Bootstrap.
Nele eu tenho uma parte que consiste em alguns ícones grandes distribuídos assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/bqONxBA.jpg&key=234edac8fb9960e930ce26a089a3888fabdb80d598ddb68170dd5cfa6c4a2188" alt="bqONxBA.jpg" />
Em resoluções maiores, a distribuição ficará assim.. 2 linhas com 3 ícones cada.. e depois vai se ajustando por causa do Bootstrap.
Quando clicamos em cada ícone, surge embaixo um bloco com textos e conteúdos a parte... Exemplo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/BKzq77r.jpg&key=dd1ed9d469342447418004d551b155fa0b3ca3ff2b04659bcf3af83c476d1a8d" alt="BKzq77r.jpg" />
Porém.. isso está me quebrando a cabeça. Não consegui deixar de um jeito prático...
Como cada ícone está dentro de uma div "col-", eu deixei o conteúdo oculto de cada ícone também dentro da mesma div.. e por jQuery, quando clica, ele mostra a div oculta.. Porém é que esse conteúdo oculto está sendo limitado ao tamanho da div pai ('col-'), e é preciso que ocupe a largura toda da janela.. como na imagem de exemplo....
Dai fiz uma gambiarra por jQuery, porém outro problema... que é a margin da div.. ela não fica grudada no canto esquerdo da tela.. precisaria criar algum jeito de auto calcular essa distância e depois aplicar a div oculta na hora dela aparecer....
Ai ai..
Alguém teria uma sugestão/ideia de como fazer?
No caso, colocar todos os 6 ícones dentro de um único "col-md-12"?
E dai dentro dos <li> eu coloco um novo "row" para o conteúdo oculto?
sim... dae tu pode controlar o padding entre eles no ccs da ul, como seria em cada col e como é uma lista terá o mesmo efeito do col, colocando um abaixo do outro conforme a resolução...
quanto o conteúdo oculto pode ser abaixo do ul ou em uma nova estrutura row
Mas dai acho que não rola.. tipo.. Pq cada ícone tem seu conteúdo e cada conteúdo tem que abrir logo abaixo do respectivo icone.. se eu por o conteúdo no final da UL, todos vão abrir no final..
ou não?
não... tu não vai por o conteúdo no final da ul (dentro de u ma li), mas tens um problema porque eles abrirão na extensão da página e não bem abaixo do respectivo icone.
<div class="row">
<div class="col-md-12">
<ul class="list-inine">
<li></li>
</ul>
<!--
tu pode por teu conteúdo aqui
-->
</div>
</div>
<div class="row">
<div class="col-md-12 conteudoOculto">
<!--
ou aqui
-->
</div>
</div>aqui a gambas seria setar no css a posição de cada div oculto abaixo do li, mas dae acho que daria uma mão muito ruim
Exato. Problema é que precisa mesmo abrir embaixo de cada ícone o conteúdo respectivo. :(
Estou testando várias formas.. alguma tem que dar certo.
ou outra sugestão seria setar em cada col-md position:relative e por dentro deste uma div com position:absolute e width:100% dae ele fica sempre dentro desta div e com a largura que tu setar, mas tem que ser em % pra ficar responsivo
neste caso tu tem que ajustar o top do div absolute
ou outra sugestão seria setar em cada col-md position:relative e por dentro deste uma div com position:absolute e width:100% dae ele fica sempre dentro desta div e com a largura que tu setar, mas tem que ser em % pra ficar responsivo
Sim.
Minha primeira tentativa foi assim.
Coloquei uma div de conteúdo com position absolute dentro da "col", até deu.. mas o problema é realmente a dimensão dessa div...
Agora estou testando algo puramente por jquery..
cara, tu pode fazer uma gambas assim... uma ideia de estrutura, vamo ve se da:
<div class="row">
<div class="col-md-3">
<!-- conteudo -->
</div>
<div class="col-md-3">
<!-- conteudo -->
</div>
<div class="col-md-3">
<!-- conteudo -->
</div>
<div class="col-md-3">
<!-- conteudo -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-12">
<!-- primeiro icon -->
</div>
<div class="col-md-offset3 col-md-9">
<!-- primeiro icon -->
</div>
<div class="col-md-offset6 col-md-6">
<!-- primeiro icon -->
</div>
<div class="col-md-offset9 col-md-3">
<!-- primeiro icon -->
</div>
</div>
</div>abaixo deste tu repete as colunas com os icones... essa foi minha última ideia sem o uso de jquery. Mas de qualquer maneira tenho certeza que tu vai resolver :)
Consegui por jQuery.
A estrutura html ficou assim:
<div class="col-md-4">
<div class="icone"></div>
<div class="conteudo"></div>
</div>Valeu stromdh :D
cara, eu sugiro a vc não colocar os icones dentro do col.
tu pode por tudo dentro de um col-md-12 centralizado dentro de um ul com a classe list-inline.
Abaixo faz um outro row -> col-md-12 com a div oculta.
ve se ajuda
abs