0

Quando abro minha página no desktop fica assim:

inserir a descrição da imagem aqui

Quando no celular, fica desta maneira:

inserir a descrição da imagem aqui

Meu código está assim:

<div class="form-group">
        <label for="qtdpessoas" class="col-sm-2 control-label">Quantas pessoas junto com você da sua família frequentarão o culto de Vila Aricanduva?</label>
        <div class="col-sm-10">
          <select class="form-control" name="qtdpessoas" id="qtdpessoas" required="required">
              <option></option>
              <option value="1">Apenas eu</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7 ou mais</option>
              
            </select>
        </div>
      </div>

Eu gostaria que ficasse igual ao celular mesmo abrindo no desktop, visto que no desktop ele amontoa a descrição da label toda na esquerda.

Estou usando bootstrap, estou com dificuldade em ajustar isto.

1 Resposta 1

0

Remova as classes "col-sm-2" e "col-sm-10".

Com essas classes você está dizendo para o label ocupar duas colunas do grid e o input ocupar 10.

O ideal é você colocar os elementos dentro de uma DIV e setar quantas colunas essa DIV vai ocupar.

Exemplo:

<div class="form-group">
   <div class="col-12">
      <label for="qtdpessoas" class="control-label">Quantas pessoas junto com você da sua família frequentarão o culto de Vila Aricanduva?</label>
      <select class="form-control" name="qtdpessoas" id="qtdpessoas" required="required">
              <option></option>
              <option value="1">Apenas eu</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7 ou mais</option>
              
         </select>
   </div>
        
</div>
1
  • Te agradeço pela ajuda! Deu certinho ! Commented 30/09/2020 às 17:19

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 .