Question

我无法在col-sm-4和col-sm-6列中使单选按钮区域（input-group-addon）大小相同。我看了一些人们使用min-width的其他答案，这个解决方案对我来说不起作用。我希望我的单选按钮控件有一个统一的宽度。这是一个视觉示例。我的第一个radiobutton（输入组 - 插件）比第二个输入组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/

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。

如何使不同宽度列的radiobutton宽度相同

1 个答案: