2

Minha página na horizontal está da maneira que eu quero:

pag na horiz

Mas se deixar o celular vertical ela está ficando assim:

pag na vert

Como fazer para que na vertical fique da seguinte forma?

layout desejado

Segue meu código:

   <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnHome.png" />
            </a>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnProduto.png" />
            </a>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnContato.png" />
            </a>
        </div>
    </div>

2 Respostas 2

3

Não precisa mecher no css, só remover a classe col-xs-4 que é referente aos "Extra Small Devices", e assim as divs ficam em linhas e não em colunas nos dispositivos de largura menor que 768px. Vai aí o código editado:

   <div class="row">
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnHome.png" />
        </a>
    </div>
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnProduto.png" />
        </a>
    </div>
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnContato.png" />
        </a>
    </div>
</div>
2
  • tive uma dúvida vendo seu código. O uso duas classes col (sm e md), ajuda a responsividade em telas de diferentes tamanhos? Até então, eu só usava uma classe. Agradeço se puder esclarecer essa minha dúvida. Abs Commented 27/11/2015 às 14:03
  • 1
    @AngeloScali Sim, você pode alterar o tamanho das colunas da grade de acordo com a largura do dispositivo. A tabela de valores das larguras e respectivos prefixos você vê aqui: getbootstrap.com/css/#grid-options
    – Boni
    Commented 6/12/2015 às 1:11
-2

Coloque float:left nas duas últimas divs.

4
  • Coloquei e não adiantou Rafael.. Commented 8/09/2014 às 17:17
  • não mudou nada?
    – Rafael
    Commented 8/09/2014 às 17:24
  • Não, não mudou nada.. Commented 8/09/2014 às 17:25
  • Consegui resolver usando media queries, segue oque fiz: @media (min-width: 500px) { .opcoesHome .row .col-md-4 { width: 33.33333333%; float: left; } } Commented 8/09/2014 às 17:51

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 .