Align radio button mobile

0

I'm having trouble leaving the radio button next to the text.

Only in the mobile version that is "breaking" (The text is above and the radio buttom goes to the bottom line).

I need you to look like this:

Here'smycode:

<divclass="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>

Look how you're doing:

Even if I decrease the size of the radio it is not next to the text: /

    
asked by anonymous 27.02.2018 / 19:26

1 answer

0

I made some small additions to your code, try whenever possible to use the classes that the bootstrap makes available, this will cause these "breaks" not to happen. Another important point is to take care not to use these classes in inappropriate elements. Any questions at documentation .

<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>

Follow JsFiddle with the code.

    
27.02.2018 / 19:51