Fórum bootstrap #501674

18/11/2014

0

Front-end

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

Rob2014

Responder

Posts

19/11/2014

Joel Rodrigues

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

Gostei + 0

20/11/2014

Rob2014

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
Responder

Gostei + 0

20/11/2014

Fernando Blomer

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


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

Gostei + 0

20/11/2014

Rob2014

Deu certo. Obrigado!
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar