如何使不同宽度列的单选按钮宽度相同答案

【问题标题】：How to make radiobutton width the same for different width columns如何使不同宽度列的单选按钮宽度相同
【发布时间】：2016-05-13 06:02:08
【问题描述】：

我无法使 col-sm-4 和 col-sm-6 列中的单选按钮区域 (input-group-addon) 大小相同。我查看了其他一些人们使用 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>

这是小提琴https://jsfiddle.net/DTcHh/20504/

【问题讨论】：

不确定你想要什么，实际的单选圆和文本框正方形应该是一样的大小？还是装着它们的盒子？如果是后者，您可以使用所需宽度设置所有输入的样式： input {width:50%;}
是的，即使第二个输入组插件非常宽。我希望单选按钮部分具有相同的宽度。
@RachelS 我已经更新了你的解决方案，欢迎你回答，我很乐意删除我的。
这是我的问题的截图。您可以看到“任何日期”单选按钮更宽。 imgur.com/YDPi6qw
是的，您可以看到第一个单选按钮区域（input-group-addon）与第二个单选按钮区域的宽度不同。我希望它们具有相同的宽度。输入组的大小不同。这使得使用 % 成为不可能。我试过她的输入 % 也没有解决问题。

标签： html css twitter-bootstrap-3

【解决方案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。

【讨论】：