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剧本，没理由旧脚本应该对你更好。