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

Question

我正在尝试使用 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>

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>