如何使不同寬度列的單選按鈕寬度相同

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

來源

2016-05-12 Bob Asdfasdf

不知道你想要什麼，實際的無線電圓和文本框的平方應該是相同的大小？或者包含它們的盒子？如果是後者，您可以使用所需的寬度對所有輸入進行樣式設置：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。

來源

2016-05-12 22:02:08 Yuri

如何使不同寬度列的單選按鈕寬度相同

回答

相關問題