Css 无法找到如何使用引导datetimepicker定位日历

我正在尝试使用bootstrap datetimepicker构建一个表单来选择日期，当在bootstrap表单中使用时，日历没有正确地定位在textbox下，日历图标也不是文本框旁边的一个小图标，就好像我只是在教程中制作一个简单的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>

租车协议
个人资料：
名字：
姓氏：
街道地址：
城市：
声明：
邮政编码：
电话号码：
电邮：
其他资料：
开始日期：
$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
});

---

您对

输入组的嵌套不正确。不应将表单组或网格列类直接与输入组混合使用。相反，将输入组嵌套在表单组或网格相关元素中。



<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>