ブートストラップラジオボタンのレイアウト

Question

v3.3.7を使用しています

私はこれを混乱させても、このラジオボタンが適切に行われないようです。それは常に奇妙に見えます...下のコードで、私は2つのオプションがインラインで、お互い隣にあるようにしようとしています。

しかし、彼らは彼らのラベルをカバーしているようだ、と実際の入力は巨大な...

関連するコードです：

<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

感謝

Answer 1

あなただけそのようなインラインにしたい場合は、.form-controlクラスを削除する必要があります。 .form-controlと

http://getbootstrap.com/css/

すべてのテキスト<input>

、 <textarea>、および <select>要素は、デフォルトで width: 100%;に設定されています。

<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

ちょうどあなたのラジオボタンのフォームコントロールクラスを削除します。