html - 如何使不同宽度列的单选按钮宽度相同

Question

我无法使 col-sm-4 和 col-sm-6 列中的单选按钮区域(输入组插件)大小相同。我查看了其他一些人们使用 min-width 的答案，但这个解决方案对我不起作用。我希望我的单选按钮控件具有统一的宽度。这是一个视觉示例。我的第一个单选按钮(输入组插件)比第二个输入组宽 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>                         			
      </div>
    </div>
    <div class="col-sm-2">
      <input type="submit" value="Submit" class="btn btn-primary">
    </div>
  </div>
</div>

这是 fiddle 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 .