Сделать это RadioButton выглядеть лучше

Question

Привет ребят Я делаю эту форму с некоторыми радиокнопками и бутстрапом но радиокнопками мне не нравится, как они выглядят:

radio buttons

и это мой HTML-код :

<div class="form-group"> 
    <label>Memoria SD: 
    <br> 
    <input type="radio" id="memorias" name="memoria" value="si">SI 
    </label> 
    <label> 
    <input type="radio" id="memorian" name="memoria" value="no" checked="true">NO 
    </label> 
</div> 
<div class="form-group"> 
    <label>SIM Card: 
    <br> 
    <input type="radio" id="chips" name="chip" value="si">SI 
    </label> 
    <label> 
    <input type="radio" id="chipn" name="chip" value="no" checked="true">NO 
    </label> 
</div> 
<div class="form-group"> 
    <label>Tapa: 
    <br> 
    <input type="radio" id="tapas" name="tapa" value="si" checked="true">SI 
    </label> 
    <label> 
    <input type="radio" id="tapan" name="tapa" value="no">NO 
    </label> 
</div> 

Я хочу, чтобы все кнопки радио выровненные таким образом (х) (SI) NO (х) (SI) NO (х) (SI) NO

не так, как это на данный момент: (х) (SI) NO (х) (SI) NO (х) (SI) NO

Answer 1

Это потому, что ваш <label> обернуты вокруг названия группы. <label> предназначен для отдельных входов.

Попробуйте вместо этого:

<div class="form-group"> 
    Memoria SD:<br> 
    <input type="radio" id="memorias" name="memoria" value="si">SI 
    <input type="radio" id="memorian" name="memoria" value="no" checked="true">NO 
</div> 

<div class="form-group"> 
    SIM Card:<br> 
    <input type="radio" id="chips" name="chip" value="si">SI 
    <input type="radio" id="chipn" name="chip" value="no" checked="true">NO 
</div> 

<div class="form-group"> 
    Tapa:<br> 
    <input type="radio" id="tapas" name="tapa" value="si" checked="true">SI 
    <input type="radio" id="tapan" name="tapa" value="no">NO 
</div>