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

Question

我正在使用bootstrap-datetimepicker以带有单选按钮的形式，我遇到了很多问题。第一个问题是，只有旧版本适用于我，而不是当前版本，但没关系(尽管我想知道为什么)。更大的问题是布局困惑:带有日历图标的小方 block 比输入文本框更大，如下所示:

我有几个这样的表单，在其中一些表单中，当我用“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 也有一个到 font Awesome css 文件的损坏的链接

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

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