0

Olá,

Sou um iniciante em bootstrap e me deparei com um problema de visualização de texto que não estou conseguindo resolver. A situação é a seguinte, conforme nas imagens anexadas, minha página possui um campo que exibe um texto dividido em 3 colunas na versão desktop (col-md-4) e quando a tela é diminuída, passa pra 1 coluna (col-sm-12, col-xs-12). Meu problema é, como vocês podem que a div não está deixando espaço na esquerda e na direita, como fica na versão com 3 colunas. Já tentei colocar um padding left e right de 5% para col-sm-12, mas essa alteração por algum motivo que desconheço também colocou esse padding na versão col-md-4, então desfiz as alterações. Não adicionei css aqui, porque estou usando o default do bootstrap. Alguém sabe como eu poderia colocar esse espaço na versão pequena, sem afetar a versão grande?versão grandeversão pequena

1 Resposta 1

0

Tente:

@media (min-width: 768px){
.row{
    padding-left: 15px;
    padding-right: 15px;
  }
}
1
  • Com o @media, você pode definir quando aplicar esse css. Neste caso em quando tamanho da tela for menor que 768px o css irá adicionar 15 px a esquerda e 15 px a direita da div(row) que envolve as colunas.
    – Wesley S.
    6/11/2017 às 15:08

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 .