2

Gostaria de deixar igual o print abaixo.. não sei se tem como pois isso eu vi em um aplicativo, quero saber se e possível fazer com bootstrap. pois tentei colocando os coll-md-2 mas no mobile ele ocupa a tela toda..

Como ficar Asim no mobile:

inserir a descrição da imagem aqui

2 Respostas 2

2

Utilizando as classes col-xs-... que significa extra small você consegue determinar como quer que seja renderizado os elementos na tela. Se quizesse que um elemento ocupe toda a tela na resolução xs, você aplicaria assim col-xs-12 se quer dois elementos ocupando toda a tela seria col-xs-6. Lembrando que estas classes são referenciadas dentro de uma div. A melhor referência sobre isto será sempre na documentação:

img {
  max-width: 240px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
    </div>
    <div class="col-xs-6">
      <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
    </div>
  </div>
</div>

1

Use a classe css col-xs-6 em cada coluna. Se quiser 1 colunas em aparelhos mais pequenos e 2 colunas acima dos 767px de largura, use col-xs-12 col-sm-6. Algo do género:

<div class="row"><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div></div>
3
  • Teria um exemplo ? Commented 16/11/2018 às 22:02
  • @PedroSerpa se essa é sua resposta, transfira ela do comentário para a resposta, basta clicar em editar e adicionar o código Commented 16/11/2018 às 22:24
  • Já editei. Peço desculpa, fui preguiçoso :) Commented 16/11/2018 às 23:13

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 .