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

问题描述：

我无法在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/

不知道你想要什么，实际的无线电圆和文本框的平方应该是相同的大小？或者包含它们的盒子？如果是后者，您可以使用所需的宽度对所有输入进行样式设置：input {width：50％;} –

是的，即使第二个输入组插件会非常宽。我希望单选按钮部分的宽度相同。 –

@RachelS我已更新到您的解决方案，欢迎您回答，我很乐意删除我的。 – zer00ne

答

我认为你是更广泛地与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。

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

相关推荐