bootstrap
Olá,
Gostaria de saber se consigo alterar o tamanho de um grid somente em uma área do meu site.
Existe uma área do site onde quero que entre 4 caixa por linha porém só entrar três conforme o anexo.
Estou utilizando a classe "col-lg-3 col-md-3 col-sm-3 col-xs-12" em cada caixa.
Quando diminuo para 2 exemplo "col-lg-2" fica muito pequeno. Também tentei aumentar para 4 ai só cabe 2 caixas.
Também tentei definir no css o tamanho da caixa, porém ao visualizar no celular fica pequeno, não abre 100% cada caixa por linha.
Será que consigo ter um controle melhor sobre a grid somente na div que eu escolher?
Desde já agradeço o apoio.
[img:descricao=tela]http://arquivo.devmedia.com.br/forum/imagem/396907-20141118-232218.jpg[/img]
Gostaria de saber se consigo alterar o tamanho de um grid somente em uma área do meu site.
Existe uma área do site onde quero que entre 4 caixa por linha porém só entrar três conforme o anexo.
Estou utilizando a classe "col-lg-3 col-md-3 col-sm-3 col-xs-12" em cada caixa.
Quando diminuo para 2 exemplo "col-lg-2" fica muito pequeno. Também tentei aumentar para 4 ai só cabe 2 caixas.
Também tentei definir no css o tamanho da caixa, porém ao visualizar no celular fica pequeno, não abre 100% cada caixa por linha.
Será que consigo ter um controle melhor sobre a grid somente na div que eu escolher?
Desde já agradeço o apoio.
[img:descricao=tela]http://arquivo.devmedia.com.br/forum/imagem/396907-20141118-232218.jpg[/img]
Rob2014
Curtidas 0
Respostas
Joel Rodrigues
18/11/2014
Pode sim, desde que o grid interno seja independente do grid externo. Se vocÊ já tem outras colunas, por exemplo, para o menu esquerdo, então não pode ultrapassar as 12 colunas com o grid da galeria. Tente criar um grid só para a galeria.
GOSTEI 0
Rob2014
18/11/2014
Olá Joel,
Muito obrigado pela dica mas ainda para mim está confuso.
Eu fiz da seguinte forma a estrutura:
<section>
<div class="container">
<div class="row">
<div id="MenuLateral" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Menu Lateral </div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> Galeria de fotos </div>
</div>
</div>
</section>
Como devo alterar essa estrutura para ter o resultado diferente dentro da galeria de fotos?
Grato
Muito obrigado pela dica mas ainda para mim está confuso.
Eu fiz da seguinte forma a estrutura:
<section>
<div class="container">
<div class="row">
<div id="MenuLateral" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Menu Lateral </div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> Galeria de fotos </div>
</div>
</div>
</section>
Como devo alterar essa estrutura para ter o resultado diferente dentro da galeria de fotos?
Grato
GOSTEI 0
Fernando Blomer
18/11/2014
Olá Joel,
Muito obrigado pela dica mas ainda para mim está confuso.
Eu fiz da seguinte forma a estrutura:
<section>
<div class="container">
<div class="row">
<div id="MenuLateral" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Menu Lateral </div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> Galeria de fotos </div>
</div>
</div>
</section>
Como devo alterar essa estrutura para ter o resultado diferente dentro da galeria de fotos?
Grato
Muito obrigado pela dica mas ainda para mim está confuso.
Eu fiz da seguinte forma a estrutura:
<section>
<div class="container">
<div class="row">
<div id="MenuLateral" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Menu Lateral </div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> Galeria de fotos </div>
</div>
</div>
</section>
Como devo alterar essa estrutura para ter o resultado diferente dentro da galeria de fotos?
Grato
Olá Roberto, tente o seguinte
<section> <div class="container"> <div class="row"> <div id="MenuLateral" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Menu Lateral </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <p>Galeria de fotos </p> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> item 01 </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> item 02 </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> item 03 </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> item 04 </div> </div> </div> </div> </div> </section>
GOSTEI 0
Rob2014
18/11/2014
Deu certo. Obrigado!
GOSTEI 0