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

【问题标题】：Having trouble finding how to position calendar with bootstrap-datetimepicker无法找到如何使用 bootstrap-datetimepicker 定位日历
【发布时间】：2015-06-16 16:09:10
【问题描述】：

我正在尝试使用 bootstrap-datetimepicker 构建一个表单来选择日期，当在 bootstrap 表单中使用时，日历没有正确定位在文本框下，日历图标也不是文本旁边的一个小图标就像我在this 教程中一样制作一个简单的日期时间选择器。我正在努力寻找解决方案。如果有人可以提供帮助，我将不胜感激！

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

【问题讨论】：

标签： css twitter-bootstrap bootstrap-datetimepicker

【解决方案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>

【讨论】：