bootstrap-datetimepicker：輸入文本框和圖標的佈局問題

Question

我在使用單選按鈕的形式使用bootstrap-datetimepicker，並且我遇到了很多問題。第一個問題是隻有它的舊版本適用於我，而不是現在的版本，但沒關係（儘管我想知道爲什麼）。更大的問題是，佈局搞砸：與日曆圖標的小廣場越大，輸入文本框，如下所示：

我有幾種形式像這樣，在其中的一些，佈局恢復當我用「id」替換文本框的「名稱」屬性時。儘管如此，這對所有形式都不起作用，如果我理解正確，我不應該使用「id」和表單。完全取出也有助於，但我需要它來獲取我的表單的輸入。 我用我的代碼創建了一個JSFiddle，但它似乎不能正常工作。 Eonasdan的sample JSFiddle與我的略有不同。

這裏是我的HTML代碼：

<div class="col-sm-5 col-sm-offset-1"> 
<div class="form-group"> 
    <div class="radio"> 
     <div class="textlikelabel">Question? *</div> 
      <label><input value="answer1" type="radio" name="answers" required="required">Answer 1</label> 
     </div> 
     <div class="radio"> 
      <label><input value="answer2" type="radio" name="answers" required="required">Answer 2</label> 
     </div> 
     <div class="radio"> 
      <label><input value="answer3" type="radio" name="answers" required="required"/>Specific date: 
      <div class="input-group date" id="datetimepicker2">                 <input type='text' class="form-control" name="answer3text"/> 
       <span class="input-group-addon"> 
        <span class="fa fa-calendar"></span> 
       </span> 
      </div> 
      </label> 
     </div>           
</div> 
</div> 

而這裏的JavaScript的：

$('#datetimepicker2').datetimepicker({        
icons: { 
time: "fa fa-clock-o", 
date: "fa fa-calendar", 
up: "fa fa-arrow-up", 
down: "fa fa-arrow-down" 
} });  

任何想法，我做錯了？我會感謝您的幫助！

Answer 1

您應該避免將input-group嵌套在label以及父radio div之內。它因此繼承了不希望的樣式。

<div class="radio"> 
    <label><input value="answer3" type="radio" name="answers" required="required" />Specific date:</label> 
</div> 
<div class="input-group date" id="datetimepicker2"> 
    <input type='text' class="form-control" name="answer3text" /> 
    <span class="input-group-addon"><span class="fa fa-calendar"></span></span> 
</div> 

你的JS小提琴也有一個破碎的鏈接字體真棒CSS文件

參見：http://jsfiddle.net/spasticdonkey/1o3b3b1o/2/

注意，你應該使用最新版本的的DateTimePicker劇本，沒理由舊腳本應該對你更好。