異なる幅の列に対してラジオボタンの幅を同じにする方法

Question

col-sm-4とcol-sm-6の列で、ラジオボタン領域（input-group-addon）のサイズを同じにするのに問題があります。人々が最小幅を使用したこの他の回答を見てみると、この解決策は私にとってはうまくいきませんでした。私は、ラジオボタンコントロールの幅を統一したいと思います。ここには視覚的な例があります。私の最初のラジオボタン（入力・グループアドオン）は、ここで第二の入力、グループimgur link

.form-control { 
 
    width: 150px; 
 
} 
 

 
.radio-width { 
 
    width: 30px; 
 
}

<div class="container"> 
 
    <div class="form-group"> 
 
    <div class="col-sm-4"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon radio-width"> 
 
      <span class="control-label"> 
 
      <input type="radio" name="anyDate" value="anyDate"> 
 
      </span> 
 
     </span> 
 
     <div class="input-group-addon"> 
 
      <input type="text" class="form-control">   
 
     </div>        
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon radio-width"> 
 
      <span class="control-label"> 
 
      <input type="radio" name="dateRange" value="dateRange"> 
 
      </span> 
 
     </span> 
 
     <div class="input-group-addon"> 
 
      <input type="text" class="form-control">  
 
     </div>       \t \t \t 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <input type="submit" value="Submit" class="btn btn-primary"> 
 
    </div> 
 
    </div> 
 
</div>

よりも広くなっている私は、あなたが作っていると思いますフィドルhttps://jsfiddle.net/DTcHh/20504/

Answer 1

ですinput-group-addon要素と少し混乱します。次のように input-group-addonをコード化する必要があります。

<div class="input-group"> 
    <span class="input-group-addon" id="basic-addon1">@</span> 
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
</div> 

ので、あなたのコードは次のようでなければなりません：

<div class="input-group"> 
    <span class="input-group-addon"> <!-- don't need radio-width --> 
     <input type="radio" name="anyDate" value="anyDate"> 
    </span> 
    <input type="text" class="form-control input-full">  
</div> 

Fiddle here。