0

Estou tendo problemas para deixar o radio button ao lado do texto.

Só na versão mobile que está "quebrando" (O texto fica em cima e os radio buttom vão para a linha de baixo).

Preciso que fique assim:

Modelo

Esse é meu código:

<div class="row">
    <div class="form-group col-md-12 col-sm-12">    
        <p align="center">Isso é um texto de exemplo :)</p>                         
            <div class="radio" >    
                <label class="radio-inline"><input type="radio" value="Sim" name="optradio">Sim</label>                 
                <label class="radio-inline"><input type="radio" value="Não" name="optradio">Não</label>                         
            </div>                                  
    </div>  
</div>

Olha como esta ficando:

inserir a descrição da imagem aqui

Mesmo se eu diminuir o tamanho do radio ele não fica ao lado do texto :/

2
  • Cara aqui eles ficaram um do lado do outro direitinho mesmo em telas pequena! tipo 120px de largura... Vc fez algum CSS? Se sim posta ai por favor
    – hugocsl
    Commented 27/02/2018 às 18:46
  • Estou utilizando a CDN do bootstrap somente. E aqui não está ficando cara. Tipo, tem que ficar do jeitinho da imagem. O Radio button, depois o texto "Sim" e na sequencia o outro radio button e o texto "Não" . Commented 27/02/2018 às 18:49

1 Resposta 1

0

Fiz alguns pequenos acréscimos no seu código, tente sempre que possível utilizar as classes que o bootstrap disponibiliza, isso vai fazer com essas "quebras" não aconteçam. Outro ponto importante é cuidar para não utilizar essas classes em elementos inapropriados. Qualquer dúvida da uma olhada na documentação.

<div class="row">
  <div class="form-group col-md-12 col-sm-12">
    <div class="alinhamento">
      <p align="center">Isso é um texto de exemplo :)</p>
      <div class="radios">
        <label class="radio-inline"><input type="radio" value="Sim" name="optradio">Sim</label>
        <label class="radio-inline"><input type="radio" value="Não" name="optradio">Não</label>
      </div>
      <input type="text" class="form-control" id="inputTest">
    </div>
  </div>
</div>

Segue JsFiddle com o código.

2
  • Cara, aqui não mudou nada. Editei o post, olhe lá como está. Commented 27/02/2018 às 19:00
  • Descobri aqui o que era cara. Muito obrigado. Seu código está correto :) Vlw. Commented 27/02/2018 às 21:37

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 .