Alinhamento

Pelo desenho, é bootstrap. Mas qual resolução você está testando? Ele só fica jogado dessa forma se a estrutura que o Bootstrap apresenta não foi respeitada. A partir do momento que você define dentro de uma rol, duas col-N-6, ele se adapta normalmente.

Ex.:

<div class="container">
 <div class="row">
 <div class="col-sm-3">
 <!-- Imagem -->
 </div>

 <div class="col-sm-3">
 <!-- Imagem -->
 </div>

 <div class="col-sm-3">
 <!-- Imagem -->
 </div>

 <div class="col-sm-3">
 <!-- Collapse -->
 </div>
 </div>
</div>

Se eu não me engano, o bootstrap tem uma pequena falha de 1px quando você reduz de Desk pra Tablet, mas não creio que essa seja a resolução que testou. Veja um exemplo:JSFiddle.

Retorne com uma dúvida mais clara que tentaremos te ajudar a resolver.

Obs.: Lembre-se que ele sempre vai se adaptar a quantidade de colunas que colocar. Se você estruturou fora da forma que a documentação recomenda, ele vai pular, ficar menor, etc...

Olá,obrigado pela ajuda !

É exatamente igual ao exemplo que eu quero,porém eu quero uma imagem embaixo da outra. ( ele já está fazendo isso quando a resolução é menor),porém eu quero que em desktop também fique uma em baixo da outra.

Imagem:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/KeiBNN4.png&key=f9cb40f7cb143a6a549bc479f6a63a4a806d9c6d44207f39b10a90e0c58d1925" alt="KeiBNN4.png" />

Irei tentando aqui enquanto aguardo sua ajuda.

Obrigado !

Saidmrn, pra isso é só uma questão de quantidade de colunas mesmo.

Você pode fazer isso de N maneiras possíveis, usando só o bootstrap ou dando uma ajuda com o CSS.
Pra usar só o bootstrap, você precisa seguir esse exemplo de estrutura:

<!-- Vá reduzindo a largura das colunas dentro de uma outra coluna -->

container
|_ row
|_ col-sm-6
|_ row
|_ col-sm-#

Ou você pode atribuir a propriedade table ou block para as suas imagens e ai então é só colocá-las no centro da div (display: block; margin: 0 auto;).

No momento estou sem muito tempo pra codar. Qualquer coisa só dar um toque.

Agradeço novamente pela ajuda !

Tentei fazer pela tabela e obtive o seguinte resultado:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/HI3UbiZ.png&key=257b04a2545316445edfe7cef02d2269e126c42e2887f45e532cb92d628d5649" alt="HI3UbiZ.png" />

Agora como irei fazer para ocupar esse pequeno espaço entre elas ?

é correto usar margin ?,isso não poderia quebrar o layout se trocar de resolução ?

Que idéia você poderia me dar ?

Diminuindo a resolução,ele fica pior ;

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/TjcNUMz.png&key=18f650f5ed7b1758b9c615d77fe3f64365eedf6f83a49d1c1fb2e458c7d78585" alt="TjcNUMz.png" />

Diminuindo a resolução ele vai tentar se adaptar ao tamanho da coluna que está dentro. Se você pretende deixar ele fixo, é necessário que remova o responsivo dando um override no CSS, ou se for na imagem, simplesmente tirar a classe .img-responsive.

Sim, você pode usar margin, mas parece que a estrutura do HTML falhou novamente, pois não era pra um elemento ter esse espaço e os demais não. Como você estruturou esse último?

Olá,troquei esse collapse por outro,upei aqui no JSfiddle pra você ver.

https://jsfiddle.net/vm4oxv5u/

Só preciso remover esse espaço entre as imagens,pois elas já estão lado a lado.

Obrigado !

consegui resolver,coloquei as imagens em uma tabela separada.

Obrigado L.Henrique pelo suporte.

Saidmrn, grato pelo retorno.

Não se esqueça de colocar a sua dúvida como resolvida, isso ajuda a outros usuários que possuem dúvidas semelhantes a acharem soluções.

Abraços!