Bootstrap-Radio-Button-Layout

Question

v3.3.7 Mit

Egal, wie lange ich Schlamassel mit dieser, ich kann nicht scheinen, diesen Radioknopf richtig zu erledigen. Es sieht immer komisch aus ... im Code unten siehst du, dass ich versuche, die 2 Optionen inline nebeneinander zu haben.

Aber sie scheinen ihre Etiketten zu bedecken, und der tatsächliche Eingang ist riesig ...

Relevante Code:

<div class="col-md-6"> 
    <label>Gender</label> 
    <div> 
     <label class="radio-inline"> 
     <input type="radio" name="x_Gender" value="M" class="required form-control" title="*"> 
     Male 
     </label> 

     <label class="radio-inline"> 
     <input type="radio" name="x_Gender" value="F" class="required form-control" title="*"> 
     Female 
     </label> 
     </div> 
    </div> 

LINK: https://mizrachi.coda.co.il/radio.asp

Vielen Dank

Answer 1

Sie haben soeben müssen die .form-control Klassen entfernen, wenn Sie möchten, dass sie so inline sind.

http://getbootstrap.com/css/

Alle Text <input>, <textarea> und <select> Elemente mit .form-control sind width: 100%; vorbelegt.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-6"> 
 
    <label>Gender</label> 
 
    <div> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="x_Gender" value="M" class="required" title="*"> 
 
     Male 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="x_Gender" value="F" class="required" title="*"> 
 
     Female 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

Entfernen Sie einfach formSteuer Klasse Ihres Radio-Buttons.