bootstrap-datetimepicker：输入文本框和图标的布局问题

Question

我在带有单选按钮的表单中使用bootstrap-datetimepicker，但我遇到了很多问题。第一个问题是只有旧版本对我有用，而不是当前版本，但这没关系（尽管我想知道为什么）。更大的问题是布局混乱：带有日历图标的小方块比输入文本框大，如下所示：

我有几个这样的表单，在其中一些表单中，当我用“id”替换文本框的“name”属性时，布局会恢复。但这并不适用于所有表单，如果我理解正确，无论如何我都不应该在表单中使用“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 fiddle 也有一个损坏的字体链接到很棒的 css 文件

见：http://jsfiddle.net/spasticdonkey/1o3b3b1o/2/

请注意，您应该使用最新版本的 datetimepicker 脚本，没有理由让旧脚本更适合您。