Question

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

我有几个这样的表单，在其中一些表单中，当我替换＆＃34; name＆＃34;时，布局会恢复。文本框的属性为＆＃34; id。＆＃34;但是，这并不适用于所有形式，如果我理解正确，我就不应该使用＆＃34; id＆＃34;无论如何还是有表格。完全取出它也有时会有所帮助，但我需要它来获取我的表单的输入。我使用我的代码创建了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脚本，没有理由说旧脚本应该更适合您。

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

1 个答案: