无法找到如何使用bootstrap-datetimepicker定位日历

Question

我尝试使用bootstrap-datetimepicker构建表单来选择日期，并且在引导表单中使用时，日历未正确定位在文本框下，日历图标也不是一个小图标在文本框旁边，好像我只是在this教程中创建一个简单的datetimepicker。我正在努力寻找解决方案。如果有人可以提供帮助，我将非常感激！

<div class="container-fluid">
            <div class="page-header">
                <h1>Rental Car Agreement</h1>
                <img src="../chris_cole">
            </div>
            <section>
                <form class="form-horizontal" role="form">
                    <fieldset>
                        <legend>Personal Information:</legend>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="firstName">First Name:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="firstName" placeholder="Enter first name">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="lastName">Last Name:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="lastName" placeholder="Enter last name">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="address">Street Address:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="address" placeholder="Enter address">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="city">City:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="city" placeholder="Enter city">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="state">State:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="state" placeholder="Enter state">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="zip">Zip Code:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="zip" placeholder="Enter zip code">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="phone">Phone Number:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="phone" placeholder="Enter phone number">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="email">Email:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="email" placeholder="Enter email">
                                </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>Other Information:</legend>
                        <div class="form-group input-group date" id="datetimepicker1">
                            <label class="control-label col-sm-2" for="startDate">Start Date:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="startDate">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#datetimepicker1').datetimepicker();
                            });
                        </script>
                    </fieldset>
                </form>
            </section>
        </div>

Answer 1

input-group类的嵌套不正确。不应将表单组或网格列类直接与输入组混合使用。而是将输入组嵌套在表单组或与网格相关的元素中。 http://getbootstrap.com/components/#input-groups

<div class="col-sm-10">
    <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" id="startDate">
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>
</div>